Advanced
Milestone 4: filters and search in the URL
Keep the search text and the priority filter in the URL with useSearchParams() from react-router, and show only matching tasks.
input#search sets q (remove q when the box is empty). select#priority sets priority (remove it for all). Use { replace: true }.
Board shows only tasks whose title contains q (ignoring case) and whose priority matches. <output id="url"> already shows the current URL.
What Check tests
- Typing
reputsq=rein the URL - Only titles containing
reare shown - Choosing
highaddspriority=highand filters - Clearing the search removes
q - Choosing
allremovespriorityand shows every task
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.