Forms and Controlled Components

Build predictable and testable forms using controlled inputs in React.

Controlled inputs

A controlled input gets its value from React state.

tsx

const [email, setEmail] = useState('');

<input
  type="email"
  value={email}
  onChange={e => setEmail(e.target.value)}
/>

Multi-field form

tsx

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

function onChange(e: React.ChangeEvent<HTMLInputElement>) {
  setForm(prev => ({ ...prev, [e.target.name]: e.target.value }));
}

Submission

tsx

function onSubmit(e: React.FormEvent) {
  e.preventDefault();
  // validate then submit
}

Controlled forms are easier to validate and debug.

Next, we will implement validation.