I'm trying to send and see my data status in my console log, when I click on 'Cancel' button, the status will be change by status:cancel, if I click on 'finish' button then the status is status:finish and same idea for the last one with save. Here what I've try to do but the status is not working

export default function App() {
  const [data, setData] = useState({
    status: ""
  });
  const [status, setStatus] = useState("");
  const saveState = () => {
    setStatus("saved");
  };

  const finishState = () => {
    setStatus("finish");
  };

  const pendingState = () => {
    setStatus("pending");
  };

  useEffect(() => {
    axios
      .post("")
      .then((res) => {
        console.log(res);
        setInvitations(res.data.invitations[0]);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  function submit(e) {
    e.preventDefault();
    axios
      .post("", {
        status: data.status
      })
      .then((res) => {
        console.log(res.data);
      });
  }
  return (
    <>
      <form onSubmit={(e) => submit(e)}>
        <button onClick={saveState}>Save</button>
        <button onClick={finishState}> Finish</button>
        <button onClick={pendingState}> Cancel</button>
      </form>
    </>
  );
}

CodePudding user response：

you can use simple setsate

export default function App() {
  const [data, setData] = useState({
    status: "",
  });
  const [status, setStatus] = useState("");

  useEffect(() => {
    axios
      .post("")
      .then((res) => {
        console.log(res);
        setInvitations(res.data.invitations[0]);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  function submit(e) {
    e.preventDefault();
    axios
      .post("", {
        status: data.status,
      })
      .then((res) => {
        console.log(res.data);
      });
  }
  return (
    <>
      <form onSubmit={(e) => submit(e)}>
        <button onClick={() => setStatus({ status: "saved" })}>Save</button>
        <button onClick={() => setStatus({ status: "finish" })}> Finish</button>
        <button onClick={() => setStatus({ status: "pending" })}>
          {" "}
          Cancel
        </button>
      </form>
    </>
  );
}

CodePudding user response：

You are using setStatus to change the status, but you are using axios.post() on your data.status

You need to either setData in your 3 functions

const saveState = () => {
  setData({status:"saved"});
};  
const finishState = () => {
  setData({status:"finish"});
};
const pendingState = () => {
  setData({status:"pending"});
};

or you can change axios.post to:

function submit(e) {
      e.preventDefault();
      axios
        .post("", {
          status: status //This is the change
        })
        .then((res) => {
          console.log(res.data);
        });
    }