I am currently working on a project using TypeScript. In this project, I have a form that should output 4 values after submitting the form. However, only the input field linked to the controller is sending a value, while the others are returning undefined:
{title: undefined, description: undefined, rating: 4, name: undefined} //from my console log
This is how my form interface looks like:
export interface IReviewForm {
name: string;
title: string;
description: string;
rating: number;
}
Here is my form setup:
const { register, control, handleSubmit } = useForm<IReviewForm>();
const onSubmit = (data: IReviewForm) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<Input {...register('name')} />
<Input {...register('title')} />
<div>
<Controller
control={control}
name='rating'
render={({ field }) => (
<Rating isEditable rating={field.value} setRating={field.onChange} />
)}
/>
</div>
<Textarea {...register('description')} />
<div>
<Button>Send</Button> <!-- submit button -->
</div>
</div>
</form>
);
This is what my package.json file includes:
"dependencies": {
"next": "11.0.1",
"react": "17.0.2",
"react-hook-form": "^7.3.4",
...
},
"devDependencies": {
"@types/react": "^17.0.3",
"typescript": "^4.2.3"
...
}
P.S. Running `npm i` after deleting `node_modules` and `package-lock` files did not resolve the issue.
EDIT: The form works with normal inputs. Even though my Input tag seems to be a normal input without children:
return (
<input className={cn(className, styles.input)} {...props} />
);