CODEWITHSUNDEEP
javascriptarraysreactjs
Sylar
Sylar

Reputation: 12092

How to delete an item from state array?

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.

Upvotes: 287

Views: 697905

Answers (20)

MD Helal Uddin
MD Helal Uddin

Reputation: 1

when you want to remove an item from the state in react you will use the ES6 filter.

const [bookmark, setBookMark] = useState([])
const deleteItem = (id) => {
  const newArray = bookmark.filter(item => item.id !== id);
  setBookMark(deletId)
}

Upvotes: 0

Ammad Ahmed
Ammad Ahmed

Reputation: 19

This way seems simplest to me for deleting from state array in reactJS.

const handleSelectedTaxDec = (dec, action) => {
  const newState = selectedTaxDec.filter((tax) => tax?._id !== dec?._id);
  setSelectedTaxDec(newState);

};

Upvotes: 0

Kenneth Ngige Mwaura
Kenneth Ngige Mwaura

Reputation: 11

Removing an element with a certain value // Note filter function always returns a new array.

const people = ["Bob", "Sally", "Jack"]
    
const removeEntry = (remove) => {
const upDatePeople = people.filter((Person) =>{
return Person !== remove
});
console.log(upDatePeople)
//Output: [ 'Sally', 'Jack' ]
}
removeEntry("Bob");

Upvotes: 0

Mostafa Mohammadzadeh
Mostafa Mohammadzadeh

Reputation: 911

If you use:

const[myArr, setMyArr] = useState([]);

for add:

setMyArr([...myArr, value]);

and for remove:

let index = myArr.indexOf(value);
if(index !== -1)
    setPatch([...myArr.slice(0, index), ...myArr.slice(index, myArr.length-1)]);

Upvotes: 1

Amer NM
Amer NM

Reputation: 179

This is your current state variable:

const [animals, setAnimals] = useState(["dogs", "cats", ...])

Call this function and pass the item you would like to remove.

removeItem("dogs")

const removeItem = (item) => {
    setAnimals((prevState) =>
      prevState.filter((prevItem) => prevItem !== item)
    );
  };

your state variable now becomes:

["cats", ...]

Another way of doing it is by using useState hook. Check docs: https://reactjs.org/docs/hooks-reference.html#functional-updates It states: Unlike the setState method found in class components, useState does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax as shown below or use useReducer hook.

const [state, setState] = useState({});
setState(prevState => {
  return {...prevState, ...updatedValues};
});

Upvotes: 6

Afraz Ahmad
Afraz Ahmad

Reputation: 5416

Just filter out deleted item and update the state with remaining items again,

let remainingItems = allItems.filter((item) => {return item.id !== item_id});
    
setItems(remainingItems);

Upvotes: 5

willmaz
willmaz

Reputation: 2475

Simple solution using slice without mutating the state

const [items, setItems] = useState(data);
const removeItem = (index) => {
  setItems([
             ...items.slice(0, index),
             ...items.slice(index + 1)
           ]);
}

Upvotes: 41

Ritwik Math
Ritwik Math

Reputation: 44

const [randomNumbers, setRandomNumbers] = useState([111,432,321]);
const numberToBeDeleted = 432;

// Filter (preferred)
let newRandomNumbers = randomNumbers.filter(number => number !== numberToBeDeleted)
setRandomNumbers(newRandomNumbers);

//Splice (alternative)
let indexOfNumberToBeDeleted = randomNumbers.indexOf(numberToBeDeleted);
let newRandomNumbers = Array.from(randomNumbers);
newRandomNumbers.splice(indexOfNumberToBeDeleted, 1);
setRandomNumbers(newRandomNumbers);


//Slice (not preferred - code complexity)
let indexOfNumberToBeDeleted = randomNumbers.indexOf(numberToBeDeleted);
let deletedNumber = randomNumbers.slice(indexOfNumberToBeDeleted, indexOfNumberToBeDeleted+1);
let newRandomNumbers = [];
for(let number of randomNumbers) {
    if(deletedNumber[0] !== number)
        newRandomNumbers.push(number);
};
setRandomNumbers(newRandomNumbers);

Upvotes: -3

Hidayt Rahman
Hidayt Rahman

Reputation: 2678

filter method is the best way to modify the array without touching the state.

It returns a new array based on the condition.

In your case filter check the condition person.id !== id and create a new array excluding the item based on condition.

const [people, setPeople] = useState(data);

const handleRemove = (id) => {
   const newPeople = people.filter((person) => person.id !== id);

   setPeople( newPeople);
 };

<button onClick={() => handleRemove(id)}>Remove</button>

Not advisable: But you can also use an item index for the condition if you don't have any id.

index !== itemIndex

Upvotes: 23

Shardul Birje
Shardul Birje

Reputation: 420

Almost all the answers here seem to be for class components, here's a code that worked for me in a functional component.

const [arr,setArr]=useState([]);
const removeElement=(id)=>{
    var index = arr.indexOf(id)
    if(index!==-1){
      setArr(oldArray=>oldArray.splice(index, 1));
    }
}

Upvotes: 0

Glover
Glover

Reputation: 45

const [people, setPeople] = useState(data);

const handleRemove = (id) => {
   const newPeople = people.filter((person) => { person.id !== id;
     setPeople( newPeople );
     
   });
 };

<button onClick={() => handleRemove(id)}>Remove</button>

Upvotes: 2

Gibbs
Gibbs

Reputation: 22974

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

Redfer doc for more info

Upvotes: 0

ANKIT DETROJA
ANKIT DETROJA

Reputation: 2065

Easy Way To Delete Item From state array in react:

when any data delete from database and update list without API calling that time you pass deleted id to this function and this function remove deleted recored from list 

export default class PostList extends Component {
  this.state = {
      postList: [
        {
          id: 1,
          name: 'All Items',
        }, {
          id: 2,
          name: 'In Stock Items',
        }
      ],
    }


    remove_post_on_list = (deletePostId) => {
        this.setState({
          postList: this.state.postList.filter(item => item.post_id != deletePostId)
        })
      }
  
}

Upvotes: 20

Rayon
Rayon

Reputation: 36609

Use .splice to remove item from array. Using delete, indexes of the array will not be altered but the value of specific index will be undefined

The splice() method changes the content of an array by removing existing elements and/or adding new elements.

Syntax: array.splice(start, deleteCount[, item1[, item2[, ...]]])

var people = ["Bob", "Sally", "Jack"]
var toRemove = 'Bob';
var index = people.indexOf(toRemove);
if (index > -1) { //Make sure item is present in the array, without if condition, -n indexes will be considered from the end of the array.
  people.splice(index, 1);
}
console.log(people);

Edit:

As pointed out by justin-grant, As a rule of thumb, Never mutate this.state directly, as calling setState() afterward may replace the mutation you made. Treat this.state as if it were immutable.

The alternative is, create copies of the objects in this.state and manipulate the copies, assigning them back using setState(). Array#map, Array#filter etc. could be used.

this.setState({people: this.state.people.filter(item => item !== e.target.value);});

Upvotes: 23

QC innodel
QC innodel

Reputation: 33

It's Very Simple First You Define a value 

state = {
  checked_Array: []
}

Now,

fun(index) {
  var checked = this.state.checked_Array;
  var values = checked.indexOf(index)
  checked.splice(values, 1);
  this.setState({checked_Array: checked});
  console.log(this.state.checked_Array)
}

Upvotes: 0

MarcoS
MarcoS

Reputation: 17721

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

Upvotes: 300

Arthur Chen
Arthur Chen

Reputation: 31

Some answers mentioned using 'splice', which did as Chance Smith said mutated the array. I would suggest you to use the Method call 'slice' (Document for 'slice' is here) which make a copy of the original array.

Upvotes: 3

iaretiga
iaretiga

Reputation: 5215

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

Upvotes: 377

Dmitry
Dmitry

Reputation: 4373

Here is a minor variation on Aleksandr Petrov's response using ES6

removePeople(e) {
    let filteredArray = this.state.people.filter(item => item !== e.target.value)
    this.setState({people: filteredArray});
}

Upvotes: 63

Aleksandr Petrov
Aleksandr Petrov

Reputation: 1288

You forgot to use setState. Example: 

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

But it's better to use filter because it does not mutate array. Example:

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

Upvotes: -1

Related Questions