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?
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.
What you need to do is:
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);
Call the state setter function
setProblems(newState);
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.