Search Filter
Build a live search filter: a text input narrows a fixed list of fruits case-insensitively by substring, rendering matches as list items and announcing the result count via a status region.
Create a controlled search experience over a fixed list of five fruits: Apple, Banana, Cherry, Date, Mango.
Render a text input with the placeholder Search fruits. As the user types, filter the fruit list to only those whose name contains the typed query as a case-insensitive substring, and render each matching fruit as a list item.
Above or below the list, show a live region with role="status" whose text is exactly {n} results, where {n} is the number of currently visible fruits (e.g. 5 results, 2 results, 0 results).
When the input is empty, all five fruits are shown and the status reads 5 results. Clearing the input restores the full list.
This exercises controlled inputs, derived state, accessible live regions, and rendering lists from filtered data.
Requirements
- Render a text input with placeholder "Search fruits".
- Display the fruits Apple, Banana, Cherry, Date, Mango as list items.
- Filter the list case-insensitively by substring as the user types.
- An empty query shows all five fruits.
- Show a role="status" region with the exact text "{n} results" reflecting the current count.
- Each visible fruit must be a list item (role listitem).
Hints (4)
- Keep the full fruit list as a constant and derive the visible list with Array.prototype.filter inside render — no need to store filtered results in state.
- Lowercase both the fruit name and the query before calling includes() so matching is case-insensitive.
- An empty query makes every fruit pass the filter automatically: any string .includes('') returns true.
- Put the count in an element with role="status" so screen readers (and the tests) can read it accessibly.
Topics
- React
- DOM Manipulation
Asked at
Freshworks · Unacademy · CRED · Zoho · PharmEasy · PhonePe
