Intermediate
Extract a useFilter hook
FruitList has working search logic written inline. CityList needs the same behaviour but doesn't filter at all.
Move the logic into a custom hook named **useFilter(items)** that returns { query, setQuery, results } (case-insensitive, ignores spaces at the ends), and use it in both lists.
Keep the ids: inputs #fruit-search and #city-search, lists #fruits and #cities.
What Check tests
- Searching fruits for "AN" shows Banana and Mango
- Searching cities for " pu " shows only Pune
- The two searches are independent
- A custom hook named useFilter exists and both lists call it
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.