How does React handle forms?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import { useState } from 'react';

export default function Signup() {
  const [form, setForm] = useState({ email: '', plan: 'free', accept: false });

  function handleChange(e) {
    const { name, value, type, checked } = e.target;
    setForm(prev => ({ ...prev, [name]: type === 'checkbox' ? checked : value }));
  }

  function handleSubmit(e) {
    e.preventDefault();
    console.log(form);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" value={form.email} onChange={handleChange} />
      <select name="plan" value={form.plan} onChange={handleChange}>
        <option value="free">Free</option>
        <option value="pro">Pro</option>
      </select>
      <label><input type="checkbox" name="accept" checked={form.accept} onChange={handleChange} /> Accept</label>
      <button type="submit">Create account</button>
    </form>
  );
}