Intermediate
Filters in the URL
Make the three buttons filter the list using search params, not useState: #veg sets ?type=veg, #fruit sets ?type=fruit, and #all removes the type param completely.
The list shows only items whose type matches, or all items when there's no type. The address bar (#address) already shows pathname + search.
What Check tests
- At the start all four items are listed
- Vegetables shows only Carrot and Spinach and puts
type=vegin the URL - Fruit shows only Apple and Mango
- All shows every item and removes
typefrom the URL - The filter comes from the URL, not
useState
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.