REACT Delete Element in array of objects

Question

I am having trouble deleting an element inside an array of objects. I want to simply delete an object inside the array. When I try to use .IndexOf(). It gives me back -1. is there a way to do this without creating a reference to each object.

This is my Array of objects.

   let todos = [{
      id: 1,
      task: 'Finish This React App'
    },{
      id: 2,
      task: 'Do Another App'
    },{
      id: 3,
      task: 'Pass data from the parent to the child and reverse'
    }]

let task = {id:2,task:'Do Another App'}

let todosArray = this.props.todos

todosArray.indexOf(task,0) //= -1

Overall I want to only have objects 1 and 3 inside the todos array.

@brian-bier didn't specify this, but in react you should never modify the original value when changing state. I believe his question is about achieving this. Not just about removing from an array — user1372408
– user1372408, Commented Feb 1, 2018 at 15:20

kevin ternet · Accepted Answer · 2016-08-22 19:39:06Z

6

You can use filter in pure vanillia ES6 :

var array = todos.filter(item => item.id === 1 || item.id === 3);

answered Aug 22, 2016 at 19:39

kevin ternet

4,6322 gold badges21 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

1020rpz Over a year ago

This should be the validated answer but you can do it the other way and do todos.filter(item => item.id !== 2);

Pranav C Balan · Accepted Answer · 2016-08-22 19:46:35Z

1

The Array#indexOf method always returns -1 since the objects reference is not the same.

You can use Array#findIndex, Array#every, Object.keys() and Array#splice methods.

let todos = [{
  id: 1,
  task: 'Finish This React App'
}, {
  id: 2,
  task: 'Do Another App'
}, {
  id: 3,
  task: 'Pass data from the parent to the child and reverse'
}]

let task = {
  id: 2,
  task: 'Do Another App'
};
let keys = Object.keys(task);

// remove element from the array by index
todos.splice(
  // get the index of the element
  todos.findIndex(function(obj) {
    // check all property values are equal
    return keys.every(function(k) {
      return task[k] === obj[k];
    });
    // if you want to check only the `id` property then     // you can avoid the above codes and use
    // return obj.id === task.id;
  }), 1);

console.log(todos)

Note : Above methods only works if there is no nested object and array property value.

edited Aug 22, 2016 at 19:46

answered Aug 22, 2016 at 19:40

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

1 Comment

user1372408 Over a year ago

todos.splice changes the original array, which is not something you would want for managing state in a typical react application. If that's the case you will want to use todos.filter(...) to create a new array with the modified contents. Alternatively copy the array (todos = [...todos]) and delete elements from the copy.

Collectives™ on Stack Overflow

REACT Delete Element in array of objects

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related