How to Delete an Item from State Array

How to delete an item from state array?

To remove an element from an array, just do:

array.splice(index, 1);

In your case:

removePeople(e) {
  var array = [...this.state.people]; // make a separate copy of the array
  var index = array.indexOf(e.target.value)
  if (index !== -1) {
    array.splice(index, 1);
    this.setState({people: array});
  }
},

ReactJS remove item from state (array of objects)

What you want is the filter array prototype method.

  const deleteItem = (name) => {
    setCartData((state) => state.filter((item) => item.name !== name))
  } 

When using the current state value to update state, it's good practice to pass a callback function to setState.

Deleting item from state array in react

To take out an item from an array you can do the following:

array.filter(item=>item!==itemToRemove)

So in your example:

this.deleteItem = item => event => {
  const filter = getter => val => getter(val) !== item.id
  this.setState({
    res: this.state.res.filter(filter(({id})=>id)),
    selectedItems: this.state.selectedItems.filter(
      filter(id=>id)
    )
  })
}

The problem you have is that res stores an array of objects that have an id (for example: [{id:1}], then selectedItems is an array that stores the id: (for example: [1]).

Array.prototype.filter works in the following way: newArray = array.filter(filterFunction). For each item in array filterFunction is called with that item. If filterFunction returns false then that item is not copied to newArray, it it returns true it is copied to newArray. The original array stays untouched (as it should be with state because you should not mutate it).

So the problem is that your filter function gets an item of the array, decides if it should return true or false (true to keep the item and false to not keep it). So if I filter res the filter function will receive {id:X} (object with an id) but when I filter selectedItems I will receive X (the id).

So the filter function needs to take out element(s) with a certain id, however; with res that id is a property of an object and with selectedItems it is an id. For res you can write a getter function to get the id out of the object: resItem=>resItem.id, give that function an item from res and it'll return an id. For selectedItems the getter function should just return the value it's given because items in selectedItems are ids, so that getter function looks like id=>id

Ok, lets' get back to filter, I have an array of id's called selectedItems [9] and want to remove id with value 9, let's call that idToRemove so I can do: selectedItems.filter(id=>id!==idToRemove). That same function won't work with res because {id:9} never equals 9.

But what if I pass a selector to the filter function, here it gets a bit complicated because functions can return a function:

const idToRemove = 9;

//filter function return true for array item to stay in the copied array

// and false to not include the array item in the copy

const filter = getter => arrayItem =>

  getter(arrayItem) !== idToRemove;

//passing filter a getter function will return a function that takes

//  an item and uses the getter function on that item to compare it

//  to idToRemove

const compareId = filter(id => id);

console.log('keep 9?', compareId(9));

console.log('keep 8?', compareId(8));

//now create a filter function that takes an object and uses

//  the getter to get object.id and compares that to idToRemove

const compareObjectWithId = filter(object => object.id);

console.log('keep {id:9}?', compareObjectWithId({ id: 9 }));

console.log('keep {id:8}?', compareObjectWithId({ id: 8 }));

Removing item from state array in React

You are setting the new block to the result of the splice() method, although, that method mutates the array in place and returns the removed elements.
Instead, you should clone the array and then splice it

const removeBlock = (index: number) => {
  const newBlockArray = [...blocks];
  newBlockArray.splice(index, 1);
  setBlocks(newBlockArray)
}

P.S. Be aware that the above performs a shallow copy of the array, but it should not be a problem in this case.

Removing element from array in component state

The cleanest way to do this that I've seen is with filter:

removeItem(index) {
  this.setState({
    data: this.state.data.filter((_, i) => i !== index)
  });
}

Deleting object of a state array in React using id

The map function returns the index as the second parameter, the text is not an object it wont have the id in it.

{
    text.map((item, index) => {
        return (
            <>
                <li key={index}>{item}</li>
                <button onClick={() => handleClickDelete(index)}>
                    Delete
                </button>
            </>
        );
    })
}

Then, in the delete function use the index to remove the text from the array updating the state with the new Array.

const handleClickDelete = (index) => {
    const newTexts = [...text]
    newTexts.splice(index, 1) // To remove the index 
    setText(() => newTexts);
};

---

Related Topics