Updating a single field in object Javascript

Question

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?

Answer 1

It only updates the state with the last state value 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);