Don Warren Don Warren - 4 years ago 143
React JSX Question

How to edit an item in a state array?

So here is my state:

this.state = {
ids: ['A', 'E', 'C']
};


How would I go about modifying the state so that 'E' at index 1 is changed to 'B'?
Like for example:

this.setState({
ids[1]: 'B'
});


How would this be done?

Answer Source

My suggestion is to get used to use immutable operations, so you don't modify internal state object.

As pointed in the react docs:

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

In this case, you can [1] use slice() to get a new copy of the Array, [2] manipulate the copy, and, then, [3] setState with the new Array. It's a good pratice.

Something like that:

let newIds = this.state.ids.slice() //copy the array
newIds[1] = 'B' //execute the manipulations
this.setState({ids: newIds}) //set the new state
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download