Delete item from state array in react

Question

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

const  people  setPeople    useState data    const handleRemove    id    gt       const newPeople   people filter  person    gt    person id     id       setPeople  newPeople                       lt button onClick       gt  handleRemove id   gt Remove lt  button gt

User · Answer

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             x000D   x000D  var people     Bob    Sally    Jack   x000D  var toRemove    Bob   x000D  var index   people indexOf toRemove   x000D  if  index  gt  -1      Make sure item is present in the array  without if condition  -n indexes will be considered from the end of the array  x000D    people splice index  1   x000D    x000D  console log people   x000D   x000D   x000D    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   gt  item     e target value

User · Answer

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

User · Answer

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

User · Answer

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    x000D   x000D  export default class PostList extends Component   x000D    this state     x000D        postList    x000D            x000D            id  1  x000D            name   All Items   x000D               x000D            id  2  x000D            name   In Stock Items   x000D            x000D           x000D        x000D   x000D   x000D      remove post on list    deletePostId    gt    x000D          this setState   x000D            postList  this state postList filter item   gt  item post id    deletePostId  x000D             x000D          x000D     x000D    x000D   x000D   x000D

User · Answer

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

User · Answer

I also had a same requirement to delete an element from array which is in state  const array      this state selectedOption  const found  array findIndex x  gt x index   k  if found     -1      this setState      selectedOption array filter x   gt  x index     k             First I copied the elements into an array  Then checked whether the element exist in the array or not  Then only I have deleted the element from the state using the filter option

User · Answer

const array       this state people   array splice i  1   this setState  people  array

User · Answer

Here is a minor variation on Aleksandr Petrov s response using ES6  removePeople e        let filteredArray   this state people filter item   gt  item     e target value      this setState  people  filteredArray

[javascript] Delete item from state array in react

Examples related to javascript

Examples related to arrays

Examples related to reactjs