Correct way to push into state array

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 };
});