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:

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:

• javascript
• reactjs

Share Improve this question Follow edited Apr 3, 2021 at 4:30 adnjoo asked Apr 3, 2021 at 4:28 adnjooadnjoo 10933 silver badges99 bronze badges 2

• Can you share a minimal CodeSandbox that reproduces the issue? – Arun Kumar Mohan Commented Apr 3, 2021 at 4:30
• @ArunKumarMohan ok I have shared a CodeSandbox link – adnjoo Commented Apr 3, 2021 at 4:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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"
/>

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 })} />