How to Remove an Item from an Array in React State While Preserving Immutability?

Removing an Item from an Array State in React

In React, managing state is crucial for maintaining the component's internal data. When dealing with arrays in state, maintaining immutability is essential to avoid common pitfalls.

Consider the scenario of removing an item from an array in state. A common approach is to mutate the original array using Array.prototype.delete(), as shown in the question:

removePeople(e) {
  var array = this.state.people;
  var index = array.indexOf(e.target.value);
  delete array[index];
}

However, in React, it's recommended to avoid directly mutating the state. Instead, create a new copy of the array containing the desired changes:

removePeople(e) {
  this.setState({people: this.state.people.filter(function(person) {
    return person !== e.target.value;
  })});
}

This approach utilizes the Array.prototype.filter() method to create a new array that includes all elements except the one to be removed. It doesn't mutate the original array, ensuring the immutability of the state.

By employing this approach, you maintain state integrity and avoid potential issues related to state mutation in React.

The above is the detailed content of How to Remove an Item from an Array in React State While Preserving Immutability?. For more information, please follow other related articles on the PHP Chinese website!