Getting Uncaught TypeError: path.split is not a function in react

Question

I'm trying to do validations for my form in react. I chose "react-hook-form" library. But I'm constantly getting error "Path.split is not a function. Even after using the default example given in their website, I'm getting the same error. This is the default code given in the official site.

import React from "react"; import { useForm } from "react-hook-form";  export default function App() {   const { register, handleSubmit, watch, errors } = useForm();   const onSubmit = data => console.log(data);    console.log(watch("example")); // watch input value by passing the name of it    return (     {/* "handleSubmit" will validate your inputs before invoking "onSubmit" */}     <form onSubmit={handleSubmit(onSubmit)}>     {/* register your input into the hook by invoking the "register" function */}       <input name="example" defaultValue="test" ref={register} />              {/* include validation with required or other standard HTML validation rules */}       <input name="exampleRequired" ref={register({ required: true })} />       {/* errors will return when field validation fails  */}       {errors.exampleRequired && <span>This field is required</span>}              <input type="submit" />     </form>   ); } 

Answer 1

react-hook-form updated to 7.0.0 from 6.X.X and has breaking changes:

You have to replace all ref={register} with {...register('value_name')}

Example:

Version 6.X.X:

<input ref={register({ required: true })} name="test" /> 

Version 7.0.X:

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