Live Search Filter

Easy
Free
#Forms and Inputs

Build a search box that filters a list of items as the user types. Given a fixed list of fruits, render only the items whose name contains the current search text (case-insensitive), updating on every keystroke. When nothing matches, show a "No results found" message instead of the list. This is one of the most common beginner React exercises and demonstrates controlled inputs, deriving rendered output from state, and conditional rendering.

Requirements

  • Render a controlled <input> with data-testid="search-input" whose value is React state.
  • Filter the list so only items whose name contains the search text are shown. Matching must be case-insensitive.
  • Render the matching items inside <ul data-testid="results">.
  • When no items match, render <p data-testid="no-results">No results found</p> instead of the list.

Concepts you'll practice