How to edit an item in a state array?
Here is another solution to change a specific index of array in a setState:
this.setState({
...array,
Object.assign([...array], { [id]: yourNewObjectOrValue })
})
Case 1: If you know the index then you can write it like this:
let ids = [...this.state.ids]; // create the copy of state array
ids[index] = 'k'; //new value
this.setState({ ids }); //update the value
Case 2: If you don't know the index then first use array.findIndex or any other loop to get the index of item you want to update, after that update the value and use setState.
Like this:
let ids = [...this.state.ids];
let index = ids.findIndex(el => /* condition */);
ids[index] = 'k';
this.setState({ ids });
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 practice.
Something like that:
const newIds = this.state.ids.slice() //copy the array
newIds[1] = 'B' //execute the manipulations
this.setState({ids: newIds}) //set the new state