React Hooks Form : undefined values on submit

Question

I took the example from the documentation :

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  console.log(watch("example")); 

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input defaultValue="test" {...register("example")} />
      <input type="submit" />
    </form>
  );
}

But on every change or on submit, I got undefined for each field

I tried to install the library again but nothing change and I got undefined everywhere...seems to be a problem with the register function. Does anybody got the same issue ?

Agitprop

What version of react-hook form are you using? – Aureomycin

hi, you can check react-hook-form.com/api/useform/watch. you should add manually in your watch values when you make submit it takes values normally in submit – Werby

I use the version 6.15.5 – Agitprop

Please update to latest e.g. 7.4.2, v6 is not working with that way – Yeaton

Answer 1

With v7 the usage of register changed as noted in the comments. If you still need to use v6, you have to write it like this:

function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  console.log(watch("example")); 

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input defaultValue="test" name="example" ref={register} />
      <input type="submit" />
    </form>
  );
}

Docs v6

Flaxseed

I'll check that and let you know. Thx – Agitprop

Thx again. This indeed was the problem – Agitprop

Answer 2

In my case it was a typo:

<input defaultValue="test" {...(register('name'), { required: true })} />

// submit => { name: undefined }

Instead of:

<input defaultValue="test" {...(register('name', { required: true }))} />

// submit => { name: "test" }

Hopefully it can help someone else.

Rafael

+10!! this is such an easy mistake to make. I had to carefully spot the difference in your code! – Blouin

+100 this caught me off-guard – Interstadial

Answer 3

I had this issue when using the Input component from reactstrap. Using that component made all my values undefined. I switch the Input to a normal input and was able to read in values

Before:

<Input 
                placeholder="Password"
                type="password"
                id="password"
                defaultValue=""
                {...register('password')}
                required
              />

Fixed:

<input 
                placeholder="Password"
                type="password"
                id="password"
                defaultValue=""
                {...register('password')}
                required
              />

Pepperandsalt

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Adultery

Answer 4

What worked for me was removing the ref I had on my <input />

Scalade

Answer 5

In my case, I was using a Controller, so to fix the Undefined value I just had to pass defaultValues to useForm. See the rules section here: https://react-hook-form.com/api/useform/watch

 const { register, handleSubmit, control, setValue} = useForm<MyFormValues>({
    defaultValues : {
      receiveUpdates: false
    }
  });

<Controller
  control={control}
  name="receiveUpdates"
  render={({ field }) => (
    <FormControlLabel
      control={
        <Checkbox
          ref={field.ref}
          checked={field.value}
          onChange={field.onChange}
        />
      }
      label="Receive Email Updates?"
      labelPlacement="start"
    />
  )}
/>

Kilby

Answer 6

In my case I installed like "npm i react-hook-form" and I don't know why, but it was installed ^6.15.8 version, and I removed it and try again and then it was install correctly. So try to check out your version of react-hook-form

Airwoman