React cannot set variable inside onClick function

Question

I am trying to set a variable inside an onClick event. I am setting the error messages into the variable.

const handleEdit = (e) => {
        e.preventDefault();

         if (edit_user.email == "") {
             setEditUserError({ email: "Please enter an email!" })
        }

        if (edit_user.company == "") {
           setEditUserError({ ...edit_user_error, company: "Please enter company!" })
       }

And I am showing the error in the form like <span className="text-danger">{edit_user_error.company}</span>

The problem is that when all the fields are empty and when I click the button only the last message is shown. When I make one field empty, and then click the submit button it is working correctly. I tried console.log(edit_user_error) but it is showing empty. What am I doing wrong? Please help

Ramesh Reddy · Accepted Answer · 2022-03-01 14:08:03Z

3

This is because of batched state updates. React will try to reduce the renders by minimizing the state updates. You can use functional state update to fix this:

if (edit_user.email == "") {
  setEditUserError({ email: "Please enter an email!" });
}

if (edit_user.company == "") {
  // this callback gets executed only when previous state updates are done
  setEditUserError((prev) => ({ ...prev, company: "Please enter company!" }));
}

To clear the errors when fields are valid:

const getErrors = () => {
  return {
    ...(!edit_user.email ? { email: "Please enter an email!" } : {}),
    ...(!edit_user.company ? { company: "Please enter company!" } : {}),
  };
};

const handleEdit = (e) => {
  e.preventDefault();

  setEditUserError(getErrors());
};

edited Mar 1, 2022 at 14:08

answered Mar 1, 2022 at 12:08

Ramesh Reddy

10.7k3 gold badges22 silver badges38 bronze badges

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

2 Comments

Akhilesh Over a year ago

This doesn't work properly. When I enter values and submit, the error messages are not going.

Ramesh Reddy Over a year ago

@Akhilesh That's because there's no code to clear the errors if the fields are valid. Not exactly related to the original problem. Anyway updated the answer to clear the errors.

Obed Parlapiano · Accepted Answer · 2022-03-01 12:55:50Z

React state updates are async, which means they won't run right away. So when running multiple setState to the same state, you can't expect the state from the first setState call to be update it before the second setState call happens.

In short, React is ignoring your earlier setState calls because they happen one after another.

The solution is to put the update into a single call:

    const handleEdit = (e) => {
        e.preventDefault();
         
        let errors = {};

         if (edit_user.email == "") {
             errors.email = "Please enter an email!"
        }

        if (edit_user.company == "") {
           errors.company = "Please enter company!"
       }

      // and then we call state with all the values, only once
      setEditUserError(errors);

Collectives™ on Stack Overflow

React cannot set variable inside onClick function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related