Forms & Controlled Components

function RegistrationForm() {
  const [form, setForm] = useState({
    name: "", email: "", password: "", role: "viewer", agree: false
  });
  const [errors, setErrors] = useState({});

  const update = (field) => (e) => {
    const value = e.target.type === "checkbox" ? e.target.checked : e.target.value;
    setForm(prev => ({ ...prev, [field]: value }));
  };

  const validate = () => {
    const errs = {};
    if (!form.name)           errs.name = "Name is required";
    if (!form.email.includes("@")) errs.email = "Invalid email";
    if (form.password.length < 8)  errs.password = "Min 8 characters";
    return errs;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const errs = validate();
    if (Object.keys(errs).length > 0) { setErrors(errs); return; }
    console.log("Submitting:", form);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={form.name} onChange={update("name")} placeholder="Full Name" />
      {errors.name && <span className="error">{errors.name}</span>}

      <input value={form.email} onChange={update("email")} type="email" />
      <input value={form.password} onChange={update("password")} type="password" />

      <select value={form.role} onChange={update("role")}>
        <option value="viewer">Viewer</option>
        <option value="editor">Editor</option>
        <option value="admin">Admin</option>
      </select>

      <label>
        <input type="checkbox" checked={form.agree} onChange={update("agree")} />
        I agree to Terms
      </label>

      <button type="submit">Register</button>
    </form>
  );
}