I'm using Next.js, TypeScript, sanity and tailwindcss. Im trying to use the react-hook-form but i receive an error.
I've tried:
Post
function to an arrow functionPost
function to a const functionIFormInput
interface to a typeThis is where the error is:
23 | formState: { errors },
> 24 | } = useForm<IFormInput>();
| ^
25 |
26 | return (
27 | <main>
And this is my code ([slug].tsx) in the pages folder:
import { useForm, SubmitHandler } from "react-hook-form";
interface IFormInput {
_id: string;
name: string;
email: string;
comment: string;
}
function Post({ post }: Props) {
const { register, handleSubmit, formState: { errors } } = useForm<IFormInput>();
return (
<form>
<input {...register("_id")} type="hidden" name="_id" value={post._id} />
<input {...register("name", { required: true })} type="text"/>
<input {...register("email", { required: true })} type="text" />
<textarea {...register("comment", { required: true })} />
{errors.name && (<span>- The Name Field is required</span>)}
{errors.comment && ( <span>- The Comment Field is required</span>)}
{errors.email && ( <span>- The Email Field is required</span>)}
<input type="submit" />
</form>
);
}
Any assistance is greatly appreciated.
just verify your react-router-dom . i already installed it and my app was working perfectly but after some days i got this error so i verified my package.json and didnt find the react-router-dom dependency so try npm i react-router-dom again .