Correct modification of state object arrays in ReactJS - arrays

Question

I have an array of points located at this.state.points. I have an updatePoint() function I use to update individual points in this array. I thought that using .slice() would leave my state untouched until I call setState but when I console.log this.state.points after I set the value for points[i], I see it is already updated. How do I prevent my state from getting updated before I call setState?
updatePoint(i, point) {
console.log('updatePoint '+i)
let points = this.state.points.slice()
points[i] = point
this.setState({points: points})
}
This version also does not work:
updatePoint(i, point) {
console.log('updatePoint '+i)
let points = this.state.points.slice()
points.forEach((j) => {
points[j] = Object.assign({}, this.state.points[j])
})
points[i] = point
this.setState({points: points})
}

Answer 1

Array.slice does not perform a deep copy, so if your this.state.points is an array of objects, you'll need to copy those object items too.
You can copy an object using Object.assign.

Answer 2

You can use the spread operator (...) that came with ES6:
updatePoint(i, point) {
console.log('updatePoint '+i)
let points = [...this.state.points]
console.log("points", points);
points[i] = point;
console.log("state",this.state.points);
this.setState({points: points})
console.log(this.state.points);
}
You can test it here (and also try it checking the console.log on your own environment):
class Hello extends React.Component {
constructor(props){
super(props);
this.updatePoint = this.updatePoint.bind(this);
this.state = {
points: [{name: "uno"},
{name: "dos"},
{name: "tres"}]
};
console.log(this.state.points);
}
// i = 1, name: ocho
updatePoint = (i, point) => {
console.log('updatePoint '+ i)
console.log("spread", [...this.state.points]);
const newPoints = [...this.state.points];
console.log("points", newPoints);
newPoints[i] = point;
console.log("state",this.state.points);
this.setState({
points: newPoints
});
}
render() {
const nowState = this.state.points.map(item => <p key={item.name}>{item.name}</p>);
return (
<div>Hello
<button
onClick={() => this.updatePoint(1, {name: "ocho"})}
>Click
</button>
<p>Current state
{nowState}</p>
</div>);
}
}
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
More info on the spread operator:
From https://learn.microsoft.com/en-us/scripting/javascript/reference/spread-operator-decrement-dot-dot-dot-javascript :
Allows parts of an array literal to be initialized from an iterable expression (such as another array literal), or allows an expression to be expanded to multiple arguments (in function calls).
https://redux.js.org/docs/recipes/UsingObjectSpreadOperator.html
An alternative approach is to use the object spread syntax proposed for the next versions of JavaScript which lets you use the spread (...) operator to copy enumerable properties from one object to another in a more succinct way.