Lesson 2 of 8
Filtering as you type
- 13 min
- 5 checks
- 3 hints
- Go to task
Goal
Search without reloading
01
Explanation
Filtering doesn't mean deleting from the list. The data stays complete, and what changes is which part of it is shown.
The filter method returns a new array holding the elements that pass the test and leaves the original array as it is. So you keep the search text in the state and render products.filter(...) instead of products.
That's why everything comes back on its own when you clear the search box: nothing was ever deleted.
02
Your task
Make typing in the box show only the items that contain the typed text, and make clearing the box bring all the items back.
Checks
5 checks- All the products show at the start
- Typing filters the list
- Searching for a whole word gives the right result
- The counter matches the number of items shown
- Clearing the box brings every item back, because none was deleted