Lesson 16 — Form submit

Handle a form submit

When a form is submitted, the browser normally reloads the page. In React you stop that with e.preventDefault() and handle the data yourself. Keep the input text in state (a controlled input), and on submit copy it into another state to show or send it.

<form onSubmit={(e) => { e.preventDefault(); setQuery(search); }}>

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: sign-up, login, search and contact forms all start exactly like this.