Intermediate
Build a component the tests can find
Build FilterList({ items }) so the three given tests pass. Read them first: they describe exactly what users must be able to do.
It needs a text input with the visible label Filter fruits, a list (<ul> with <li>) of the items that contain the typed text (ignoring upper/lower case), and an element with role="status" that says No fruits match "kiwi" (with the typed text) when nothing matches. Keep the status element on the page all the time, empty when there are matches.
After the tests, the code mounts your component into the page so you can try it.
What Check tests
- All three given tests pass
- The input has a visible label "Filter fruits"
- Typing in the app filters the list
- No matches shows the status message and an empty list
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.