Why are the useState values not defined?

Question

I have a react application. I recently added a POST feature. When I connected it to the front end via useContext, I got the below error message:

src/components/messages/SendMessage.js Line 57:16: 'senderName' is not defined no-undef Line 66:16: 'senderEmail' is not defined no-undef Line 75:16: 'senderCompanyName' is not defined no-undef Line 84:16: 'message' is not defined no-undef Search for the keywords to learn more about each error.

The undefined elements are the default states that I connected to the component. It is supposed to get the input data and then post to the database via Fetch. I can't figure out what happened. Before the logic was in a separate State file and I used to get the error message that the Context file is undefined, so I moved all the logic code to the component file and now the error message got more specific and says that these specific elements are undefined. But how? Below is the code:

import React, { useContext, useState } from "react";
import companyContext from "../../logic/companies/companyContext";

const SendMessage = ({ company }) => {
  const myCompanyContext = useContext(companyContext);
  const { convertToLink } = myCompanyContext;

  // Set defaults
  // add a message
  const [newMessage, setNewMessage] = useState({
    date: new Date(),
    recieverID: company.id,
    senderName: "",
    senderEmail: "",
    senderCompanyName: "",
    message: ``,
  });

  // add message function
  // CRUD functions

  // add a message
  const addMessage = async input => {
    const requestOptions = {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(input),
    };
    const response = await fetch(
      "http://localhost:5002/messages",
      requestOptions
    );
    const data = await response.json();
    setNewMessage(data);
  };

  // Event actions
  // add message
  const onChange = change =>
    setNewMessage({ ...newMessage, [change.target.name]: change.target.value });
  const onAddButton = submit => {
    submit.preventDefault();
    addMessage(newMessage);
  };

  return (
    <form
      className="center modal"
      id={"message-#" + company.id + "-" + convertToLink(company.name)}
      onSubmit={onAddButton}
    >
      <h4>Send message to {company.name}</h4>
      <input
        className="input"
        type="text"
        name="senderName"
        value={senderName}
        onChange={onChange}
        placeholder="Your name"
        required
      />
      <input
        className="input"
        type="text"
        name="senderEmail"
        value={senderEmail}
        onChange={onChange}
        placeholder="Your email"
        required
      />
      <input
        className="input"
        type="text"
        name="senderCompanyName"
        value={senderCompanyName}
        onChange={onChange}
        placeholder="Your company's name (optional)"
      />
      <textarea
        className="input"
        rows="10"
        type="text"
        name="message"
        value={message}
        onChange={onChange}
        placeholder="Write your message here..."
        required
      ></textarea>
      <br />
      <button className="button-cta" type="submit">
        Send message
      </button>
      <a className="delete button" href="/#!">
        close
      </a>
    </form>
  );
};

export default SendMessage;

As you can see, the "undefined" elements are connected to the component via "onChange" but it does not seem to work.

Answer 1

Can you try the below instead of {senderName} try {newMessage.senderName}?