Lesson 12 — Filtered list UI

Search as you type

A controlled input keeps its text in state: value={q} shows the state, onChange updates it on every key press. During render you filter the list with that text, so the list updates instantly. includes(q) is true when the text contains q (an empty q matches everything).

cities.filter((c) => c.startsWith(text))

Note: Next.js pages are React components, so this preview runs your code with plain React in the browser. Next.js-only features (the file router, server rendering, data fetching on the server) are not running here — where a lesson needs them, it shows a small simulation instead.

Why it matters: instant client-side search is one of the most common features on any site.