Array methods - map, filter and find
Transform, narrow down and search arrays with map, filter and find, the three methods React lists are built on.
On Day 2 you will show a list of books on the screen. In React you do not write a loop that adds items to the page one by one. Instead, you transform an array of data into an array of things to show. Three array methods do almost all of that work: map, filter and find.
Each of them takes a function as its input, and calls that function once for each item in the array. Arrow functions from two lessons ago make this short and readable.
Every example in this lesson uses the same small reading list:
const books = [
{ id: 'b1', title: 'The Hobbit', author: 'J.R.R. Tolkien', status: 'done' },
{ id: 'b2', title: 'Dune', author: 'Frank Herbert', status: 'reading' },
{ id: 'b3', title: 'Emma', author: 'Jane Austen', status: 'want' },
{ id: 'b4', title: 'Beloved', author: 'Toni Morrison', status: 'done' },
];map: transform every item
map creates a new array of the same length, where each item is whatever your function returns for the matching original item.
Read books.map((book) => book.title) as: "for each book, give me its title". The name book is up to you; it is a parameter, so you could call it anything. A clear singular name of the array's contents is a good habit.
(The import line at the top loads books from the second file. You will learn how that works in the next lesson.)
filter: keep some items
filter creates a new array with only the items for which your function returns a truthy value. Think of it as asking a yes-or-no question about each item.
filter is also how you will remove an item on Day 3: keep every book whose id is not the one you want to delete. It is a copy without that item, and the original array is untouched.
find: get one item
find returns the first item for which your function returns a truthy value. It does not return an array. If nothing matches, it returns undefined.
Use filter when you want all matches (an array). Use find when you want one item, for example the book whose detail page you are showing.
Chaining, and leaving the original alone
Because map and filter return arrays, you can call another method straight on the result. This is called chaining.
None of these methods change the original array. They always return something new. That matches what you learned about spread: React prefers new copies over changed originals, so map and filter fit React perfectly.
Deep diveWhat about forEach and for loops?
forEach and for...of loops also go through every item, but they do not return a new array. They are for doing something with each item, not for producing a result. In React you almost always want a result, such as a list of things to show, so map and filter are the usual choice. Other handy methods you will meet are some (is at least one item a match?), includes (is this value in the array?) and join (glue items into one string).
Reading report
Using the books array, create:
wantTitles: an array of the titles of books with status'want'.labels: an array of strings likeThe Hobbit (done), one per book.herbert: the book whose author is'Frank Herbert'.
Show solution
const wantTitles = books
.filter((book) => book.status === 'want')
.map((book) => book.title);
// ['Emma']
const labels = books.map((book) => `${book.title} (${book.status})`);
// ['The Hobbit (done)', 'Dune (reading)', 'Emma (want)', 'Beloved (done)']
const herbert = books.find((book) => book.author === 'Frank Herbert');
// { id: 'b2', title: 'Dune', ... }filter then map narrows the list and then reshapes it. find returns the object itself, not an array with one object in it.
An array has 10 items. How many items does the result of .map() have?
What does books.find((b) => b.id === 'nope') return when no book has that id?
Day 1 progress