Why is JSON.stringify is rerturning null?-CodePudding

The user is supposed to input some text in a box and be sent from the front end (react js) to mongodb passing by nodejs. All this is working just fine but the problem is that what is being sent is just null instead of the actual text. So I went ahead and consoled.log JSON.stringify and surprisingly it was returning {}.

Please let me know if im missing anything.

pingbutton.js file:

const Pingbutton = () => {
const [form, setForm] = useState({
    message: "",
  });
  const navigate = useNavigate();

  function updateForm(value) {
    
    return setForm((prev) => {
      return { ...prev, ...value };
    });
  }

    async function onSubmit(e) {
 console.log("This is e: "   e);
    console.log("This is form: "   form);
    e.preventDefault();
  
    const newMessage = { ...form };
    console.log("3: "   newMessage);
    console.log("5: "   JSON.stringify(newMessage));

    await fetch("http://localhost:5000/record/add", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(newMessage),
    }).catch((error) => {
      window.alert(error);
      return;
    });

    setForm({ message: "" });
    navigate("/");
  }

  return (
    <>
      <form onSubmit={onSubmit}>
        <textarea
          className="message"
          type="text"
          placeholder="Type somthing!"
          // value={this.state.val}
        ></textarea>
        <div className="body">
          <button
            className="button"
            type="text"
            value={form.name}
            onClick={(e) => {
              magic();
              updateForm({ message: e.target.value });
              handleButtonClick();
            }}
          >
            <span className="default">Ping</span>
            <span className="success">Wohoo! You Pinged Me!</span>
            <div className="left"></div>
            <div className="right"></div>
          </button>

        </div>
      </form>
    </>
  );
};

export default Pingbutton;

This is a picture of my console:

CodePudding user response：

In your form, you aren't handling the textarea changes. To do so I updated the JSX, see below:

  return (
    <>
      <form onSubmit={onSubmit}>
        <textarea
          className="message"
          type="text"
          placeholder="Type somthing!"
          value={form.message}
          onChange={(e) => updateForm({ message: e.currentTarget.value})}
        ></textarea>
        <div className="body">
          <button
            className="button"
            type="submit"
          >
            <span className="default">Ping</span>
            <span className="success">Wohoo! You Pinged Me!</span>
            <div className="left"></div>
            <div className="right"></div>
          </button>
        </div>
      </form>
    </>
  );

Since you are using an onSubmit with your form, you could also make your button of type="submit" and remove the onClick handler, unless you need that for something else.

To handle the textarea change, add an onChange handler to that element, similar to what you did already on the button.