Will react-hook-form work without the name prop?

user_2897115 0
Viewed 86

I have seen this example in the react-hook-form documentation https://react-hook-form.com/api/useform/register Custom onChange, onBlur

const firstName = register('firstName', { required: true })
<input 
  onChange={(e) => {
    firstName.onChange(e); // method from hook form register
    handleChange(e); // your method
  }}
  onBlur={firstName.onBlur}
  ref={firstName.ref} 
/>

Here there is no name="firstName" inside <input>

So will this work without mentioning name prop?

react-hook-form reactjs
2 Answers

The name is required, how else could RHF know what field the value belong to? The code in the docs is missing the name prop. You can confirm that the code doesn't work if you omit it:

<input
  // without the line below you can't see the submitted value
  name={firstName.name}
  onChange={(e) => {
    firstName.onChange(e); // method from hook form register
    handleChange(e); // your method
  }}
  onBlur={firstName.onBlur}
  ref={firstName.ref}
/>

Codesandbox Demo

user_94494260

I also faced with problem of RHF not working without the name prop, however, in the documentation of the current version (7.13.0), code examples are already without the name prop. Updating the version solved the problem for me. Validation delay also started working (the delayError option in the useForm hook)

user_96377380
Related