Question 72880 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Not getting the correct value on using react-hook-form with a counter – Reactjs

I have a very simple implementation of a counter. On form submit, the value of the counter is always "0". The counter value is changing but I am not sure why on form submit, the counter value is 0.

I am not sure, what I am missing. Thank you for your time.

CodeSandBox

Below is my code:

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm();
  const [quantity, setQuantity] = React.useState(0);

  const decrement = () => {
    setQuantity((prev) => (prev === 0 ? 0 : prev - 1));
  };

  const increment = () => {
    setQuantity((prev) => prev + 1);
  };

  const formSubmit = (data) => console.log(data);

  return (
    <div className="App">
      <h1>Counter</h1>
      <form onSubmit={handleSubmit(formSubmit)}>
        <button type="button" onClick={decrement}>
          -
        </button>
        <input type="number" value={quantity} {...register("quantity")} />
        <button type="button" onClick={increment}>
          +
        </button>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}
Tags:

2

Answers


  1. 0

    This might help you out

    export default function App() {

  const handleChange = (event) => {
    setQuantity(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // Result
    alert(quantity);
  };

  return (
    ....
      <form onSubmit={handleSubmit}>
        ....
        <input type="number" value={quantity} onChange={handleChange} />
        ....
      </form>
    ....
  );
}

    Furthermore details Here

    Login or Signup to reply.
  2. 0

    your code not works due to useForm use register(onChange,name,onBlur) for input and you are using quantity of useSate instead of useForm defaultValues

    If you want to do using useForm then you can do by using setValue,getValues and defaultValues in this way

    import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css";

export default function App() {
  const { register, handleSubmit, setValue, getValues } = useForm({
    defaultValues: {
      quantity: 0
    }
  });

  const decrement = () => {
    setValue(
      "quantity",
      getValues("quantity") === 0 ? 0 : getValues("quantity") - 1
    );
  };

  const increment = () => {
    setValue("quantity", getValues("quantity") + 1);
  };

  const formSubmit = (data) => console.log(data);

  return (
    <div className="App">
      <h1>Counter</h1>
      <form onSubmit={handleSubmit(formSubmit)}>
        <button type="button" onClick={decrement}>
          -
        </button>
        <input
          type="number"
          value={getValues("quantity")}
          {...register("quantity")}
        />
        <button type="button" onClick={increment}>
          +
        </button>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

    Hope this helps you out

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search