undefined errors object in react-hook-form

Question

I'm having this issue of

Cannot read property 'title' of undefined.

I already follow the sample code on the documentation of react-hook-form but I'm still having this issue.

const [taskInfo, setTaskInfo] = useState({
    title: '',
    description: '',
    created: currentUser.fullname,
    assigned: '',
    priority: '',
    dateDue: new Date(),
  });


const handleChange = (e) => {
    const { name, value } = e.target;
    setTaskInfo((prev) => ({ ...prev, [name]: value }));
  };


const { register, errors, handleSubmit } = useForm();

<TextField
  fullWidth
  variant='outlined'
  label='Title'
  value={taskInfo.title}
  onChange={handleChange}
  onFocus={handleDisbleLabel}
  onBlur={handleEnableLabel}
  InputLabelProps={{ shrink: false }}
  {...register('title', { required: 'This is required' })}
/>
  {errors.title && 'Your input is required'}

Where is taskInfo defined?

raven
– raven

2021-04-21 12:15:31 +00:00
Commented Apr 21, 2021 at 12:15 — raven
– raven, Commented Apr 21, 2021 at 12:15

NearHuscarl · Accepted Answer · 2021-04-21 12:15:55Z

20

If you are using react-hook-form v7, the errors object is moved to formState now, change your code to:

const { register, formState: { errors }, handleSubmit } = useForm();

Instead of

const { register, errors } = useForm();

Reference: migrate-v6-to-v7.

answered Apr 21, 2021 at 12:15

NearHuscarl

83.1k24 gold badges321 silver badges291 bronze badges

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

7 Comments

rjc30 Over a year ago

Thank you so much sir! I overlook the link of the documentation that i'm reading, it's for version 6 not version 7.

rjc30 Over a year ago

Sir, how can solve the issue in terms of onChange? I can't type anything on the text field. Because I need to insert the name attribute but after inserting the attribute the issue still remains.

NearHuscarl Over a year ago

@rjc30 Sorry, somehow I missed your first comment, you need to pass the ref to inputRef props of TextField. See this, it's the same problem except the author uses v7.

NearHuscarl Over a year ago

@rjc30 are you using react-hook-form v7 or v6. Because the code in your question ...register() is from v7. Also why do you need to control the form value by calling setState(), react-hook-form handles that for you internally, if you want to access the form values, use getValues() method instead.

NearHuscarl Over a year ago

@rjc30 Here is a tip: you will get help a lot quicker from other people if you can provide a demo (codepen, codesandbox...) in your question. The live example from react-hook-form docs uses codesandbox so you may want to fork it and reproduce your problem.

|

Collectives™ on Stack Overflow

undefined errors object in react-hook-form

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related