React. Unhandled Rejection (TypeError): Cannot read property 'value' of undefined

1
votes

Hello please help me to send form to email!

Unhandled Rejection (TypeError): Cannot read property 'value' of undefined Error on const handleSubmit

Error page

It is source code:

 const Form = () => {
  const classes = useStyles();
  const [status, setStatus] = useState("Submit");
  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus("Sending...");
    const { name, email, message } = e.target.elements;
    let details = {
      name: name.value,
      email: email.value,
      message: message.value,
    };
    let response = await fetch("http://localhost:5000/contact", {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=utf-8",
      },
      body: JSON.stringify(details),
    });
    setStatus("Submit");
    let result = await response.json();
    alert(result.status);
  };
1
javascripthtmljsonreactjs
The error message is very clear. How are you debugging this code? – Andy
e.target.elements.name is null; inspect e.target.elements. – Stephen Collins

1 Answers

0
votes

It seems: name, email and message are undefined/null. We would need to see your render function. (Maybe you forgot to add the name attribute to your inputs?)

You can use the form element instead, and create FormData:

const elements = new FormData(e.target);
const details = {
  name: elements.get("name"),
  email: elements.get("email"),
  message: elements.get("message"),
};