I get an object as response from a get.
Now I assign the object to a state var (object) like this:
this.setState({editData: response.data})
Is there a way to change the values within this object?
I thought about something like this:
this.setState({editData.[var]: [value]})
thanks
Firstly you have to remember that you should never mutate state object directly. So first you shold make a copy of state object and mutate the copy. Then set this copy as state. You can use spread syntax to achieve it:
this.setState((prevState) => ({editData: {...prevState.editData, [var]: value}}));
Here is working example showing that source object is not mutated:
let state = {
editData: {
age: 22
}
};
let age = "age";
let stateCopy = {editData: {...state.editData, [age]: 100}};
console.log(state);
console.log(stateCopy);
setState, you cannot pass it the object directly. So: this.setState(prev => ({editData: {...prev.editData, [var]: value}));setState queues an asynchronous process. There's a fair bit about this in the discussion of setState in the documentation; in particular, see the example starting with "This form of setState() is also asynchronous, and multiple calls during the same cycle may be batched together." In the above, since it makes a shallow copy of editData, that's using current state to create new state, and so you have to use the callback.
editData.property: prevEditData.property + 1) but if we want to override property with totally new value that is not computed from previous value it doesn't mattereditData may be getting changed by other setState calls; but your code is queuing a call with what may be (by the time it's applied) stale information. Even if you know there aren't any others being changed as of when you write your call, it lays a maintenance trap.editData as you are above, but I want to be sure.