Multi-field forms and submit

Multi-field forms and submit

A signup form has several fields. You could call useState per field, which is fine for two or three. Past that, one object keeps them together, updated with the spread pattern from lesson 4-3:

function Signup() {
  const [form, setForm] = useState({ email: "", password: "" });

  function update(field, value) {
    setForm({ ...form, [field]: value });
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={form.email}
             onChange={e => update("email", e.target.value)} />
      <input type="password" value={form.password}
             onChange={e => update("password", e.target.value)} />
      <button>Sign up</button>
    </form>
  );
}

{ ...form, [field]: value } copies the object and overwrites one field, using the computed property name syntax from Advanced JavaScript.

Handling submit

A browser submits forms by navigating to a new page, a full reload. In a React app you almost never want that, so the submit handler's first line stops it:

function handleSubmit(e) {
  e.preventDefault();
  const errors = validate(form);
  if (errors.length > 0) {
    setErrors(errors);
    return;
  }
  // send form to the server (Unit 7 covers fetching)
}

e.preventDefault() is the same DOM method from Web Development Fundamentals. Notice validate is a plain function taking the form object and returning an array of error strings. Keeping validation out of the component makes it testable, and it is exactly the kind of logic we CAN run right here.