Need some clarification from the react course todo list!

programming web dev
1

Hi, I must admit I don’t know much javascript, but I seem to be doing ok with the react course. But I am having some trouble understanding this code from the todo list project.
Here
The code is:

var filteredItems = this.state.items.filter(function (item) {
  return (item.key !== key);
});

I understand it gets the clicked item from the user and compares that item from the list of items and returns a list without that item effectively removing it. I’m just having trouble understanding the syntax. I don’t understand specifically this part:

(function (item) {
  return (item.key !== key);
});

What is function item? how are we getting keys from it and what key are we comparing it to? Thanks

And a little bonus question. If I’m understanding the => operator correctly then can it be written like this?

var filteredItems = this.state.items.filter((item) => {
  return (item.key !== key);
});
2

Welcome to the forums @tbunreal :slight_smile:

Yes! You have the arrow function example perfect. For some other syntax variations, especially given that this is a single statement, you can go even more concise:

var filteredItems = this.state.items.filter(item => return (item.key !== key););

This article shows all of the variations you can use: Arrow Functions in JavaScript

The filter method takes a function as its argument, and what we specified here is an anonymous function. This function will perform whatever operation you specify on the item without being explicitly named. To go deeper on filter, this dedicated article on it can help: Mapping, Filtering, and Reducing Things in an Array

:slight_smile:

3

Thanks for responding! I’m just about to go to bed, but I’ll look into what you said later, thank you