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

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?



Solution 1:[1]

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

Solution 2:[2]

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)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 NearHuscarl
Solution 2 demogi4523