Filtering and sorting

Learn to render an array after filtering and sorting it.

Filtering and sorting

Before drawing the list you filter with filter and sort with sort. filter returns a new array; the original is untouched. sort mutates in place.

Example: {items.filter(i => i.active).map(...)}. Only active items survive, then map draws them.

Order matters: filter first, then sort, then map. That way you skip needless sorting.

Original stays intact

filter always produces a new array; it never mutates. sort mutates in place, so taking a copy with [...items] first is safe.

In React you never mutate state directly; copying before sort is a good habit. We will see state later; for now know the copy trick.

map always produces a new array; no extra copy is needed.

Exercise FilteredList component

Complete the skeleton. Write a FilteredList component. The items array has id, name and active on each item. Use filter to keep only items where active is true, then map them into <li key={item.id}>{item.name}</li>. Export it.

Show example solution

function FilteredList() {
  const items = [{ id: 1, name: "Alex", active: true }, { id: 2, name: "Sam", active: false }];
  return <ul>{items.filter(i => i.active).map(item => <li key={item.id}>{item.name}</li>)}</ul>;
}

export default FilteredList;

Test yourself

Filtering and sorting: match the terms

filter

Keeps some items
sort

Orders items
reverse

Flips order
map

Transforms items
What does [3,1,2].sort() return?
```
sort returns an array.
```
- The sorted array (same reference)
- [3,1,2]
- undefined
- [1,2,3]
Show answer

The sorted array (same reference) — sort returns the sorted array reference.

Filtering and sorting: fill in the missing part

{items.filter(____).map(i => <li key={i.id}>{i.name}</li>)}

Show answer

{items.filter(i => i.active).map(i => <li key={i.id}>{i.name}</li>)}

Next lesson: Summary - List rendering

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies