By Vishal Basumatary in javascript — Mar 24, 2023

Correct way to push into state array

As someone who has worked with React, I can say that pushing into state arrays can be a bit tricky. However, there are ways to ensure that the process is done correctly.

Method 1: Using the Spread Operator

The easiest and most recommended way to add elements to a state array is by using the spread operator. This method creates a copy of the old array, adds the new element, and returns a new array with the new element.


this.setState(prevState => ({
   myArray: [...prevState.myArray, newItem]
}));

Method 2: Using the Concat Method

Another way to add elements to a state array is by using the concat method. This method creates a new array by combining the original array and the new element.


let newArray = this.state.myArray.concat(newItem);
this.setState({ myArray: newArray });

Method 3: Using the Push Method

Although the push method can be used to add elements to an array, it is not recommended to use it to modify state arrays in React. This is because push modifies the original array, which goes against React's unidirectional data flow. However, for those interested, the push method can be used as follows:


this.setState(prevState => {
   prevState.myArray.push(newItem);
   return { myArray: prevState.myArray };
});