reactjs- Axios post returns empty object

Question

New to Reactjs. I'm trying to post data to a local server using axios, but it is returning an empty object. What am i doing wrong? I need to send a name and an email to the json file.

const FormNew = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleChangeName = (event) => {
    setName(...name, { name: event.target.value });
  };

  const handleChangeEmail = (event) => {
    setEmail(...email, { email: event.target.value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    axios
      .post("http://localhost:3002/posts", {
        name: name,
        email: email,
      })
      .then((res) => {
        console.log(res.data);
      });
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Field.Text
        label="Name"
        name="name"
        type="text"
        onChange={handleChangeName}
      />
      <Field.Text
        label="Email"
        name="email"
        type="email"
        onChange={handleChangeEmail}
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
};
export default FormNew;

Json file where i'm trying to send data.

{
  "posts": [
    {
      "name": "JSON SERVER",
      "email": "json@net.com",
      "id": 1
    }
  ]
}

Answer 1

Your hooks are used in the wrong way, try to use it like this

  const handleChangeName = (event) => {
    setName(event.target.value);
  };

  const handleChangeEmail = (event) => {
    setEmail(event.target.value);
  };