Summary - Forms

Write a short contact form with a name input.

Summary - Forms

In this group you learned React forms. A controlled input has its value bound to state; onChange updates state on each keystroke. The single source of truth is state.

Form submit uses onSubmit and e.preventDefault(). Several fields are managed with one object state + spread.

Later we will lighten this with React Hook Form; for now the basics are enough.

Exercise Forms summary task

Complete the skeleton. Write a SearchForm component; import useState. Define const [q, setQ] = useState("");. handleSubmit (parameter e) calls e.preventDefault(). Return a <form onSubmit={handleSubmit}> with <input value={q} onChange={e => setQ(e.target.value)} /> and <button type="submit">Search</button>. Export it.

Show example solution

import { useState } from "react";

function SearchForm() {
  const [q, setQ] = useState("");
  function handleSubmit(e) { e.preventDefault(); }
  return <form onSubmit={handleSubmit}><input value={q} onChange={e => setQ(e.target.value)} /><button type="submit">Search</button></form>;
}

export default SearchForm;

Test yourself

Which is wrong?
```
preventDefault stops the reload.
```
- value is bound to state
- preventDefault is not needed on submit
- object state updates with spread
- onChange runs on each keystroke
Show answer

preventDefault is not needed on submit — preventDefault is always needed; otherwise the page reloads.
Summary - Forms: match the terms

value

State source
onChange

Change
onSubmit

Submit
preventDefault

Stop reload

Next lesson: Styling with CSS

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies