CODEWITHSUNDEEP
javascriptreactjsreact-hooksreact-hook-form
jossefaz
jossefaz

Reputation: 3932

React Hooks Form : undefined values on submit

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

enter image description here

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 ?

Upvotes: 15

Views: 31626

Answers (6)

listless
listless

Reputation: 21

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

Upvotes: 2

irie
irie

Reputation: 31

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

Upvotes: 2

Philip C.
Philip C.

Reputation: 21

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

Upvotes: 1

GG.
GG.

Reputation: 21834

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.

Upvotes: 21

KaT
KaT

Reputation: 41

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

Upvotes: 0

knoefel
knoefel

Reputation: 6949

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

Edit React Hook Form - register v6

Upvotes: 8

Related Questions