CODEWITHSUNDEEP
typescriptnext.jsreact-hook-form
Demian
Demian

Reputation: 121

Why does React Hook Form returns undefined on submit?

I write next project on typescripts. There I have form that output 4 values after form submit. But only input with controller send some value, others returns undefined:

{title: undefined, description: undefined, rating: 4, name: undefined} //my console log

My form interface:

export interface IReviewForm {
    name: string;
    title: string;
    description: string;
    rating: number;
}

My form:

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>
);

My package.json:

"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.npm i after deleting node_modules and package-lock does not help

EDIT: It works with normal inputs. But my Input tag is also normal input without childrens:

return (
    <input className={cn(className, styles.input)} {...props} />
);

Upvotes: 1

Views: 2468

Answers (1)

Saeed Shamloo
Saeed Shamloo

Reputation: 6564

Try to implement your Input component by using React.forwardRef like this:

const Input = React.forwardRef((props, ref)=> <input className={cn(className, styles.input)} {...props} ref={ref}/>)

consider that above implementation is just JS implementation and I dont't care about types because your problem is not realted to types.

Upvotes: 2

Related Questions