Form Using React Hook Forms showing undefined for Custom Input Component Fields

Question

    <div className="App">
        <div>
            <form
                onSubmit={handleSubmit((data) => {
                    console.log(data);
                })}
                className="hey"
            >
                <h2>Log in</h2>
                <Input
                    style="input"
                    placeholder="Email"
                    type="email"
                    {...register("Email")}
                />
                <Input
                    style="input"
                    placeholder="Password"
                    type="password"
                    {...register("Password")}
                />
                <Button style="button neon-transparent" type="submit" name="Log In" />
            </form>
        </div>
    </div>

I am currently in the process of trying to create a form using the react hooks form library, when I click submit on this form the object of the form gets console logged but the two fields appear as undefined when values have been put into each field. I know this is most likely an issue custom components because when I created the form with traditional input fields it worked no problem.

I am very new to this library, if anyone has an answer for how to use this library with custom components it would be much appreciated.

Here is the Input component as well:

    type InputProps = {
    type: string,
    placeholder?: string,
    style: string
}

export const Input = (props: InputProps) => {
  return (
    <input className={props.style} type={props.type} placeholder={props.placeholder} />
  )
}

Do you have the register function defined above? If possible could you show the whole component? — HudsonGraeme
– HudsonGraeme, Commented Apr 14, 2022 at 19:47
Yes i use this const { register, handleSubmit } = useForm<LoginFormModel>(); — Stefan_Griffiths
– Stefan_Griffiths, Commented Apr 14, 2022 at 19:48

Numan Ijaz · Accepted Answer · 2022-04-14 19:50:26Z

1

change your input component to the following:

export const Input = (props: InputProps) => {
   const {style, type, placeholder, ...others} = props;
   return (
        <input className={style} type={type} placeholder={placeholder} {...others} />
   );
}

answered Apr 14, 2022 at 19:50

Numan Ijaz

9291 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stefan_Griffiths Over a year ago

Thank you for the answer, is there a way to do it that doesnt required destructing the prop?

Numan Ijaz Over a year ago

sure, you can send className instead of style as prop from your main component. Then you simply use <input {...props} />

Collectives™ on Stack Overflow

Form Using React Hook Forms showing undefined for Custom Input Component Fields

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related