TypeError: Cannot read property 'message' of undefined ---using react-hook-form

Question

I am trying to display an error message when nothing is typed inside the message input form, but when I load the page I get this error 'TypeError: Cannot read property 'message' of undefined'. I am using react-hook-forms. This is my code down below.

import { Button } from "@material-ui/core";
import { Close } from "@material-ui/icons";
import React from "react";
import { useForm } from "react-hook-form";
import "./SendMail.css";

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

  const onSubmit = (formData) =>{
    console.log(formData)
  }


  return (
    <div className="sendMail">
      <div className="sendMail__header">
        <h3>New Message</h3>
        <Close className="sendMail__close" />
      </div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input name='to' placeholder="To" type="text" {...register('to',{required:true})}/>
        
        <input name="subject" placeholder="Subject" type="text" {...register('subject',{required:true})} />
        
        <input
          name="message"
          placeholder="Message..."
          type="text"
          className="sendMail__message"
          {...register('message',{required:true})}
        />
        {errors.message && <p>To is required!!</p>}

        <div className="sendMail__send">
          <Button
            className="sendMail__send"
            variant="contained"
            color="primary"
            type="submit"
          >
            Send
          </Button>
        </div>
      </form>
    </div>
  );
};

export default SendMail;

Which version of react-hook-form do you use?

knoefel
– knoefel

2021-05-11 11:37:55 +00:00
Commented May 11, 2021 at 11:37 — knoefel
– knoefel, Commented May 11, 2021 at 11:37
I am using 7.5.2

salvatore
– salvatore

2021-05-11 11:42:14 +00:00
Commented May 11, 2021 at 11:42 — salvatore
– salvatore, Commented May 11, 2021 at 11:42

knoefel · Accepted Answer · 2021-05-11 11:44:53Z

7

Since v7 the errors object moved to the formState property, so you need to adjust your destructering:

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

answered May 11, 2021 at 11:44

knoefel

7,0383 gold badges39 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

TypeError: Cannot read property 'message' of undefined ---using react-hook-form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related