ref={register} inside <input> is giving me a path.split error

user_8465517 0
Viewed 1554

Hi I'm trying to make a form with React and when I put

ref={register} inside

<input className="form-control" ref={register} type="text" name="text" id="text" />

I get the following error:

TypeError: path.split is not a function
get
src/utils/get.ts:6

Any suggestions? I'm following this guy's youtube tutorial:

Here is the code above my return () statement:

 export const CreateTodo = () => {
        const { register, handleSubmit} = useForm(); 
    
        const onSubmit = handleSubmit((data) => {
            alert(JSON.stringify(data));
        });

return ( ... );
}

CodeSandbox link:

reactjs javascript
2 Answers

The way to register inputs has changed in react-hook-form v7.0.0 (the version you're using).

From the docs,

register method is no longer occurred at ref, instead invoke the function itself and spread the props into the input. The function itself will return the following props: onChange, onBlur, name and ref.

- <input ref={register({ required: true })} name="test" />
+ <input {...register('name', { required: true })} /> 
+ <TextInput {...register('name', { required: true })} />

<input
  className="form-control"
  {...register('text')}
  type="text"
/>

Edit on CodeSandbox

user_37247160

According to new Version (7.x.x) You have to pass the register Like this

<input {...register('test', { required: true })} />

in 6.x.x it was like

<input inputref={register('test', { required: true })} />

user_114031390
Related