Correct way to push into state array Correct way to push into state array reactjs reactjs

Correct way to push into state array


Using es6 it can be done like this:

this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple valuethis.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array

Spread syntax


Array push returns length

this.state.myArray.push('new value') returns the length of the extended array, instead of the array itself.Array.prototype.push().

I guess you expect the returned value to be the array.

Immutability

It seems it's rather the behaviour of React:

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

I guess, you would do it like this (not familiar with React):

var joined = this.state.myArray.concat('new value');this.setState({ myArray: joined })


Never recommended to mutate the state directly.

The recommended approach in later React versions is to use an updater function when modifying states to prevent race conditions:

Push string to end of the array

this.setState(prevState => ({  myArray: [...prevState.myArray, "new value"]}))

Push string to beginning of the array

this.setState(prevState => ({  myArray: ["new value", ...prevState.myArray]}))

Push object to end of the array

this.setState(prevState => ({  myArray: [...prevState.myArray, {"name": "object"}]}))

Push object to beginning of the array

this.setState(prevState => ({  myArray: [ {"name": "object"}, ...prevState.myArray]}))