react-hook-form: how to add default values to the input field

Question

In my project using a react-hook-form to create and update values. but the problem is whenever click on the update button shows an empty form without the data. The lines

import { useState } from "react"
import { useCountryCreate } from "../api/usecountrycreate"
import { useForm } from "react-hook-form"


export const CountryCreateUpdateForm = ({ defaultValues, onFormSubmit, isLoading }) => {

    const { register, handleSubmit } = useForm({ defaultValues });
  
    const onSubmit = handleSubmit((data) => {
      onFormSubmit(data)
    })

  return (

        <form onSubmit={onSubmit}>
            <div>
              <label for="name">Name</label>
              <input {...register('name')} type="text" name="name" />   
            </div>         
            <button type="submit" >submit</button>
        </form>



  )
}

When console this "defaultValues.data.name " then it shows the exact name value which I want to edit but is not displayed in the field.

Please give me suggestions, that will help me to overcome this problem.

DOZBORNE · Accepted Answer · 2022-08-28 08:40:28Z

1

It seems likely here that your {defaultValues} object is probably not properly configured. it should have a property called name. If it doesn't, hook-form can't properly match it to your input registered as 'name' :)

answered Aug 28, 2022 at 8:40

DOZBORNE

6206 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sanket Shah · Accepted Answer · 2022-08-28 08:52:04Z

1

Seems like defaultValues object is not proper.

In your case I assume it's like this:

defaultValues =  {
  data: {
      name: '',
      category: '',
      ...
    }
}

It should be like this:

 defaultValues = {
      name: '',
      category: '',
      ...
    }

So change defaultValues object to the mentioned above or use the below code to set defaultValues in useForm

const { register, handleSubmit } = useForm({ defaultValues: defaultValues?.data });

answered Aug 28, 2022 at 8:52

Sanket Shah

3,1091 gold badge13 silver badges24 bronze badges

Collectives™ on Stack Overflow

react-hook-form: how to add default values to the input field

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related