Forms and Controlled Components ⚛️

1️⃣ Controlled Inputs: value + onChange

A controlled input gets its displayed text from React state, and reports every keystroke back to state. Two props make this happen: value={name} tells the input what to show, and onChange runs on every keystroke so you can call setName. Miss either one and the input either won't update or won't be controlled. Here's the smallest complete example — read it first.

function NameForm() {
  // useState holds the input's value. '' is the starting value.
  const [name, setName] = useState('');

  return (
    <div>
      <label htmlFor="name">Name:</label>
      <input
        id="name"
        type="text"
        value={name}                                 // React DRIVES the input
        onChange={(e) => setName(e.target.value)}    // every keystroke updates state
        placeholder="Enter your name"
      />
      {/* {name || 'stranger'} re-renders live as you type */}
      <p>Hello, {name || 'stranger'}!</p>
    </div>
  );
}

It's a loop on every keystroke: type → onChange → setState → re-render → the new value appears. State is never "behind" — it is what the box shows. The runnable box below walks through that round-trip one key at a time. Run it and watch state catch up.

// The controlled-input loop, simulated step by step.
// In a real component each "render" is React redrawing the input.

let state = "";                           // pretend this is useState('')
function setState(next) { state = next; } // pretend this is setName(...)

// A user types "Hi" one key at a time:
for (const key of ["H", "i"]) {
  // 1) onChange fires with the would-be new value
  const eventValue = state + key;
  // 2) you call setState -> React stores the new value
  setState(event
...

2️⃣ One State Object for Many Fields

For a single box, one useState('') per field is fine. But a login form has an email and a password, and a separate useState for each gets noisy fast. The cleaner pattern is one object — { email: '', password: '' } — updated with a computed key. A computed key is the [name] in { [name]: value }: the square brackets mean "use the value of name as the key", so one handler can update whichever field changed.

function SignUp() {
  // ONE object holds every field. Keys match each input's "name".
  const [form, setForm] = useState({ email: '', password: '' });

  // One handler for ALL inputs. [name] is a COMPUTED key.
  function handleChange(e) {
    const { name, value } = e.target;              // which input changed
    setForm(prev => ({ ...prev, [name]: value }));  // copy, then override one
  }

  return (
    <form>
      <input name="email"    value={form.email}    onChange={handleChange} />
      <input name="password" value={form.password} onChange={handleChange} />
    </form>
  );
}

The golden rule: never mutate the old object. Always spread the previous values (...prev) first, then override the one field that changed. Skip the spread and you wipe out every other field — run this to see exactly how that happens.

// Updating ONE field of a form object — with vs without spreading.
const form = { name: "Alice", email: "alice@dev.com", age: "30" };

// ❌ WRONG: returning just the changed field replaces the WHOLE object.
const broken = { email: "new@dev.com" };
console.log("Without spread:", broken);
// -> name and age are GONE.

// ✅ RIGHT: spread the old fields first, THEN override the one that changed.
const fixed = { ...form, email: "new@dev.com" };
console.log("With spread:   ", fixed);

// ✅ Expected o
...

Now you try the core move — updating one field by name while keeping the rest. Fill in the blank, then run it.

// 🎯 YOUR TURN — managing MANY fields with ONE state object.
// A real form rarely has one input. Instead of a useState per field,
// you keep an object and update it by field name.

let form = { name: "Alice", email: "old@mail.com", age: "30" };

// handleChange takes the field's name and its new value, and returns
// a NEW object: a copy of the old one with that one field replaced.
function handleChange(field, value) {
  // 👉 spread the old fields first, THEN override [field] with value
  re
...

3️⃣ Text, Checkbox, Select, and Radio

Most inputs bind to value, but a checkbox is the exception: it has no text, so you bind checked (a boolean) and read e.target.checked, not e.target.value. A <select> puts value on the select element itself — not on each <option> like raw HTML. Radio buttons share one name, and each one's checked is a comparison against the current state.

// Each input type binds to state a little differently.

// TEXT / EMAIL / NUMBER / PASSWORD -> use  value  + e.target.value
<input type="text"  value={name}  onChange={e => setName(e.target.value)} />
<input type="email" value={email} onChange={e => setEmail(e.target.value)} />

// CHECKBOX -> use  checked  + e.target.CHECKED (a true/false, not text!)
<input type="checkbox" checked={agreed}
       onChange={e => setAgreed(e.target.checked)} /> I agree

// SELECT -> value goes on the <select>, NOT on each <option>
<select value={plan} onChange={e => setPlan(e.target.value)}>
  <option value="free">Free</option>
  <option value="pro">Pro</option>
</select>

// RADIO -> several inputs share one "name"; checked is a comparison
<input type="radio" name="size" value="s"
       checked={size === 's'} onChange={e => setSize(e.target.value)} /> Small
<input type="radio" name="size" value="l"
       checked={size === 'l'} onChange={e => setSize(e.target.value)} /> Large

4️⃣ Handling Submit (preventDefault)

By default, submitting an HTML form reloads the page and throws away your React state — almost never what you want. Put onSubmit on the <form> (not on the button), and the very first line of your handler should be e.preventDefault(). After that, the form data is just an object in state — validate it, send it to an API, whatever you need.

function ContactForm() {
  const [form, setForm] = useState({ name: '', message: '' });

  function handleSubmit(e) {
    e.preventDefault();            // STOP the browser reloading the page
    console.log('Sending:', form); // now do your work: validate, fetch, etc.
  }

  // onSubmit lives on the <form>; the submit button triggers it.
  return (
    <form onSubmit={handleSubmit}>
      <input value={form.name}
             onChange={e => setForm(p => ({ ...p, name: e.target.value }))} />
      <button type="submit">Send</button>
    </form>
  );
}

Here's the rest of that handler in plain JS: after preventDefault, you validate, and only send the data if there are no errors. Run it to see the full submit → validate → send flow.

// What your submit handler does, in plain JS (no UI needed).

const form = { email: "sam@dev.com", password: "supersecret" };

function validate(form) {
  const errors = {};
  if (!form.email.includes("@")) errors.email = "Invalid email";
  if (form.password.length < 8)  errors.password = "Too short";
  return errors;                 // {} when everything passes
}

function handleSubmit(form) {
  // In React the real first line is  e.preventDefault();
  const errors = validate(form);
  const is
...

5️⃣ Basic Validation

Validation is just a function that inspects your form object and returns an errors object — one key per broken rule, with a human-readable message. An empty {} means everything passed, which you check with Object.keys(errors).length === 0. Keep this logic in a plain function so it's easy to test and reuse. Your turn: add the password rule.

// 🎯 YOUR TURN — write the validation rules.
// validate() returns an "errors" object: a key for each BAD field.
// An empty {} means the form is valid.

function validate(form) {
  const errors = {};

  // Rule 1: name must not be blank. .trim() removes spaces.
  if (!form.name.trim()) {
    errors.name = "Name is required";
  }

  // Rule 2: password must be at least 8 characters.
  // 👉 add an error to errors.password when it's too short
  if (form.password.length < 8) {
    ___ = "Password
...

// 🎯 MINI-CHALLENGE: signup form STATE logic (no UI needed).
// You're building the brain of a signup form, step by step.
//
// 1. Start with a form object: { email: '', password: '', terms: false }
// 2. Write handleField(form, field, value) that returns a NEW form
//    with ONE field changed   (hint: spread ...form, then [field]: value)
// 3. Write validate(form) returning an errors object:
//      - email needs an "@"            -> errors.email = "Invalid email"
//      - password length < 
...