practicebasic
Real-time filtered list
A search field filters a list of fruits as the user types. The filtered result is derived directly from state — no extra useState or useMemo needed at this scale.
Objectives
- 1.Declare a query state starting at an empty string
- 2.Bind the input to state with value and onChange
- 3.Derive filtered as FRUITS.filter(...) directly in the render, without additional useState
- 4.Show the result count:
{n} result(s) - 5.Show a
No resultsmessage when filtered is empty - 6.
clearbutton resets query to an empty string
your code
Hint
You don't need useState for filtered — it's a value derived from the query state. Calculate it directly in the render with .filter(). Derived state is not stored, it's recalculated.
Related concepts
Was this helpful?
Sign in to give feedback