Delete item from state array in react

javascript arrays reactjs
Sylar picture Sylar · Mar 31, 2016 · Viewed 268.2k times · Source

The story is, I should be able to put Bob, Sally and Jack into a box. I can also remove either from the box. When removed, no slot is left.

people = ["Bob", "Sally", "Jack"]

I now need to remove, say, "Bob". The new array would be:

["Sally", "Jack"]

Here is my react component:

...

getInitialState: function() {
  return{
    people: [],
  }
},

selectPeople(e){
  this.setState({people: this.state.people.concat([e.target.value])})
},

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let's say it's Bob.
  delete array[index];
},

...

Here I show you a minimal code as there is more to it (onClick etc). The key part is to delete, remove, destroy "Bob" from the array but removePeople() is not working when called. Any ideas? I was looking at this but I might be doing something wrong since I'm using React.

Answer

iaretiga picture iaretiga · Mar 31, 2016

When using React, you should never mutate the state directly. If an object (or Array, which is an object too) is changed, you should create a new copy.

Others have suggested using Array.prototype.splice(), but that method mutates the Array, so it's better not to use splice() with React.

Easiest to use Array.prototype.filter() to create a new array:

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

Related questions

Objects are not valid as a React child. If you meant to render a collection of children, use an array instead

I am setting up a React app with a Rails backend. I am getting the error "Objects are not valid as a React child (found: object with keys {id, name, info, created_at, updated_at}). If you meant to render …

Read More
How to merge two array of objects with reactjs?

I have a react-big-calendar, I want to fetch the events of this week from the backend and the other weeks from the local storage. My code is : componentDidMount() { fetch("url") .then(Response => Response.json()) .then(data => { let evts = …

Read More
What is the cleanest way to remove an element from an immutable array in JS?

I need to remove an element from an array that is a state of a React Component. Which means that it is an immutable object. Adding a element is easy using spread syntax. return { ...state, locations: [...state.locations, {}] }; Removing is …

Read More