This function is meant to delete the todo items but i don't really understand what it does, like why do you filter out the todo that doesn't have the same id with the id that is passed in the function...can anybody help me to explain? Thank you so much!

const handleDelete = ({id}) => (   setTodos(todos.filter((todo) => todo.id !== id))

)

CodePudding user response：

Let's say you have an array like this todos=[item1, item2, item3]. You click on the item1 in order to remove. So you filter the todos array, and get back all the items that are not item1. Now you have [item2, item3] in your todos array.

CodePudding user response：

The filter() method returns a new array with all the elements that pass the test. So, in your case, you pass an array with all todos except the one with the given ID to the setTodos() function. So, the todo with the specified id has been ‘removed’.

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter for more info about Array.prototype.filter()

CodePudding user response：

React uses shallow reference equality checks as part of its Reconciliation process in order to determine what has updated in state/props and what needs to be flushed out to the DOM.

Reconciliation

React uses Object.is for the shallow equality checks.

Object.is() determines whether two values are the same value. Two values are the same if one of the following holds:

• both undefined
• both null
• both true or both false
• both strings of the same length with the same characters in the same order
• both the same object (meaning both values reference the same object in memory)
• both numbers and
  • both 0
  • both -0
  • both NaN
  • or both non-zero and both not NaN and both have the same value

This is not the same as being equal according to the == operator. The == operator applies various coercions to both sides (if they are not the same Type) before testing for equality (resulting in such behavior as "" == false being true), but Object.is doesn't coerce either value.

This is also not the same as being equal according to the === operator. The only difference between Object.is() and === is in their treatment of signed zeroes and NaNs. For example, the === operator (and the == operator) treats the number values -0 and 0 as equal. Also, the === operator treats Number.NaN and NaN as not equal.

const handleDelete = ({ id }) => {
  setTodos(todos.filter((todo) => todo.id !== id));
};

The reason for using Array.prototype.filter to remove an element from an array stored in React state is because it returns a new array reference. This is what allows React to "see" that the array has been updated and needs to be rerendered.

We want to return all elements except the one the matches by id into a new array.

I suggest also when updating arrays to always use a functional state update so you ensure you are updating correctly from the previous state, since removing an element from the array necessarily depends on the previous state. It's a trivial change to effect this improved behavior.

const handleDelete = ({ id }) => {
  setTodos(todos => todos.filter((todo) => todo.id !== id));
};

CodePudding user response：

Filtering in React is the process of looping through an array and including/excluding elements inside that array based on a condition that we provide. filter returns a new array once the iterations are complete. You need to assign that filtered array to a new variable. Since filter doesn't mutate the original state array.