TheLazy.Dev
Portfolio GitHub

Blog

reacthookform |react

Set default values in react-hook-form

atosh502

Aashutosh Poudel

Posted on January 13, 2023

Set default values in react-hook-form

Data is fetched from an api or some async operation, and reset is used to set the default values for the form.

  const { reset } = useForm();

  useEffect(() => {
    // you can do async server request and fill up form
    setTimeout(() => {
      reset({
        firstName: "bill",
        lastName: "luo"
      });
    }, 2000);
  }, [reset]);
Enter fullscreen mode Exit fullscreen mode

Or if we need to partially update the form, we can pass a function to the reset function like so.

<button 
  onClick={() => {
    reset(formValues => ({
      ...formValues,
      lastName: 'test',
    }))
  }}
>
  Reset partial
</button>
Enter fullscreen mode Exit fullscreen mode

Alternatively, we can use setValue to set a few form fields

const { register, setValue } = useForm();

return (
  <form>
    <input {...register("firstName")} />
    <button type="button" onClick={()=> setValue("firstName", "Bill")}>
      setValue
    </button>
  </form>
)
Enter fullscreen mode Exit fullscreen mode

 

Resources and code snippets taken from:

💖 💪 🙅 🚩
atosh502
Aashutosh Poudel

Posted on January 13, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

React-hook-form validation
reacthookform React-hook-form validation

June 10, 2023

May the Forms be with You: A Jedi's Guide to onBlur, onChange and onTouched
onblur May the Forms be with You: A Jedi's Guide to onBlur, onChange and onTouched

May 5, 2023

How to use setValue with React Hook Form
reacthookform How to use setValue with React Hook Form

January 18, 2023

Set default values in react-hook-form
reacthookform Set default values in react-hook-form

January 13, 2023

Testing a mui Date Picker Adaptor Component Integrated with React Hook Form
reacthookform Testing a mui Date Picker Adaptor Component Integrated with React Hook Form

January 21, 2022