Updating a single field in object Javascript

user_14514276 0
Viewed 1050

I need to change state of specific fields in problems object:

  const [problems, setProblems] = useState({
    first_name: false,
    last_name: false,
    city: false,
    email: false,
    password: false,
  });

I tried something like this below, but it updates for me just the last value of error Object.keys(error.response.data) list:

.catch((error) => {
        Object.keys(error.response.data).map((err) => {
          setProblems({ ...problems, [err]: true });
        });
      });

error is an object that has keys that have the same names as keys in problems object. How can I do this correctly that all fields will be updated?

object javascript
2 Answers

It only updates the state with the last state value is because of closure over the state.

State is constant within a particular render of a component; in order to see the updated state, component has to re-render.

Since you are calling setProblems() multiple times within the same render:

setProblems({ ...problems, [err]: true });

problems in the above statement refers to the same state that was in-effect when Object.keys(...).map(...) was called. In short, you are spreading the same state each time setProblems is called.

Solution

What you need to do is:

  1. First create the object that you want to save in the state

    const newState = { ...problems };

Object.keys(error.response.data)
      .forEach((err) => newState[err] = true);

  2. Call the state setter function

    setProblems(newState);
user_60943480

Try this:

.catch((error) => {
    const newProblems = {...problems};

    Object.keys(error.response.data).forEach((err) => {
        newProblems[err] = true;
    });

    setProblems(newProblems);
});

I have not actually tested your original code, but what I am guessing is that since setState's setter is not synchronous, when you call it in a loop you are only applying the last call.

user_63016270
Related