React form submission Issue

Question

I have a modal that contains a form. Whenever I submit data through it and console log it, it never works the first time. The second time I submit data through it, the console log of the previous entry. Can anyone identify if I am potentially missing anything?

  const handleSubmit = (event) => {
    event.preventDefault();
    setOpen(false);
    setSubmission({
      ref: event.target[0].value,
      brand: event.target[1].value,
      iname: event.target[2].value,
      gtin: event.target[3].value,
      qty: 0,
    });
    console.log(submission);
  };

It is because the state is updating asynchronously. You won't get the updated values immediately — Sarun UK
– Sarun UK, Commented Nov 20, 2020 at 18:47

CountryTk · Accepted Answer · 2020-11-20 18:50:55Z

3

Well this is how hooks work, by the time you console.log(submission), the state hasn't changed yet.

This is because when you call setSubmission() it lets react know you want to update the state and puts it in a queue.

If you want to capture the state change, use an useEffect() hook

    useEffect(() => {
        console.log(submission); // this hook captures the state change and this will have the correct value
}, [submission]);  // think of this as a dependency variable that `useEffect` will listen for changes.

answered Nov 20, 2020 at 18:50

CountryTk

612 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AHCB Over a year ago

Thank you for your great answer!

Collectives™ on Stack Overflow

React form submission Issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related