JavaScript React Basics Understanding State Remove Items From State

p => p.id !== id

I was following along until this argument passed to the filter method.

.filter(p => p.id !== id)

Can someone elaborate on this?

Thanks!

2 Answers

stjarnan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,487 Points

Hi Brevans,

You're probably using .filter on an array of objects? Correct?

In this case filter takes your array and goes through each item (which you call p in your parameter), checking the items(p) to see if that particular item has got a key called id that doesn't match with whatever your id variable consists of.

Basically, your array contains objects with the key 'id'. Every item your filter goes through will be called 'p' in your function. And that function will see if the current item contains an id (p.id) that doesn't match (!==) with whatever you have stored in your id variable.

I'm writing this in a hurry before going to the gym, tried to make it easy but might have made it hard for you to understand. Does it help you?

Jonas

Jonathan Healy
Jonathan Healy
21,183 Points

To expand on what Jonas said,

Remember that filter(), returns a separate array!! So the purpose of running filter with this conditional, is to return a new 'Players' array, this time without the player whose ID was passed to it.

In other words, create a new array, but do not include the player with this specific ID. This passed, or specific, ID is determined by the 'Delete' buttons function of the associated player. Because we are, after all, trying to delete that player from the list.

Hey @brevans26,

As you probably noticed, the .filter function accepts a function as an argument (MDN Doc on .filter), and then returns a new array with ONLY the filtered items matching the criteria in the function passed as the argument

p => p.id !== id is basically a new way of writing functions in javascript

I would recommend that you watch this 8-min video on the arrow syntax in ES6: https://teamtreehouse.com/library/introducing-arrow-function-syntax

It should help you give a better understanding of what p => p.id !== id means

Spoiler: It basically is same as:

function(p){
  return p.id !== id
}

// with the `this` context bound from the parent