Remove function in React with .filter

Question

While building a Todo app, I want to filter out an object out of my array with a remove function. So far I got this.

deleteTask(task) {

    let taskList = this.state.tasks;

    var newTask = taskList.filter(function(_task) { return _task != task})

    this.setState({ 
        tasks: newTask
    });

}

Only problem is, the function returns the whole array while using the function. So the Task argument that should return just an object out of my array returns the whole array instead while in my newTask var.

How can I bind or make this function work?

The array which I am wanting to remove an object from is not located in the same Component, dont know if that matters. But for extra info.

Please add what you are getting inside both task and use arrow functions please => — Just code
– Just code, Commented Jan 12, 2019 at 11:44
what is the structure of the state.tasks and task parameter? — dfsq
– dfsq, Commented Jan 12, 2019 at 11:47
You'll have to use some unique identifier of the task. Like this: var newTask = taskList.filter(t => t.id != task.id). You might also want to read this: Equality comparisons and sameness — adiga
– adiga, Commented Jan 12, 2019 at 11:49

David Táboas · Accepted Answer · 2019-01-12 13:25:17Z

2

First off, let's see why _task != task doesn't work as you need. Try this:

const a = { x: 10, y: 'hello' };
const b = { x: 10, y: 'hello' };
console.log(
  a==b,
  a===b,
  Object.is(a,b)
);

Suprising, eh? Read this for more details.

Anyway, you should refactor your code to include an id property in your tasks, so that you can compare two tasks with their ids - no need to worry about weird implementations of object comparisons in JavaScript!

This should then work:

deleteTask(taskId) {
  this.setState(prevState => ({
    tasks: prevState.tasks.filter(task => task.id !== taskId)
  }));
}

edited Jan 12, 2019 at 13:25

David Táboas

8708 silver badges8 bronze badges

answered Jan 12, 2019 at 12:40

Nino Filiu

19k11 gold badges65 silver badges97 bronze badges

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

Comments

Vikash Kesarwani · Accepted Answer · 2019-01-12 13:17:34Z

0

Equality operator in javascript compares the references of the object. So even if both object have same value, since they point to different instances, == will always return false. So as I see you have two options:

Refactor your code to include a id part and which that to compare two tasks.
Use some library like lodash or underscore for deep comparison

answered Jan 12, 2019 at 13:17

Vikash Kesarwani

8505 silver badges14 bronze badges

1 Comment

Luciano Baarn Over a year ago

Also thanks for the tip. I'll start using the libraries once I understand JS a bit more

Collectives™ on Stack Overflow

Remove function in React with .filter

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related