<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} />
  )
}

CodePudding user response：

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