📝 Form Handling in React

Two Ways to Handle Forms

In plain HTML, a form owns its own state — the browser tracks what's typed, and a submit sends it off. React can either take that state over (a controlled component) or let the DOM keep it and read it only when needed (an uncontrolled component). Almost all interactive React forms are controlled, because state-driven UI is what React does best.

Controlled vs. Uncontrolled

Controlled: React is the single source of truth

The input's value comes from state, and every keystroke calls onChange to update that state. The state and the input can never disagree.

import { useState } from 'react';

function ControlledInput() {
  const [name, setName] = useState('');

  return (
    <label>
      Name:
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </label>
  );
}

Uncontrolled: the DOM keeps the value

You attach a ref and read .value only at submit time. Less code, but no live validation. It's the right tool for simple forms and the one case controlled inputs can't cover: <input type="file">, whose value is read-only.

import { useRef } from 'react';

function UncontrolledInput() {
  const nameRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Hello, ${nameRef.current.value}!`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" defaultValue="" ref={nameRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

One State, One Handler

Giving every field its own useState gets unwieldy fast. The scalable pattern holds the whole form in one state object and uses a single change handler that keys off each input's name attribute.

import { useState } from 'react';

function ProfileForm() {
  const [form, setForm] = useState({
    username: '',
    email: '',
    role: 'user',
    subscribe: false,
  });

  // One handler for text, select, and checkbox inputs.
  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setForm((prev) => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value,
    }));
  };

  return (
    <form>
      <input name="username" value={form.username} onChange={handleChange} />
      <input name="email" type="email" value={form.email} onChange={handleChange} />
      <select name="role" value={form.role} onChange={handleChange}>
        <option value="user">User</option>
        <option value="admin">Admin</option>
      </select>
      <label>
        <input
          name="subscribe"
          type="checkbox"
          checked={form.subscribe}
          onChange={handleChange}
        />
        Subscribe to the newsletter
      </label>
    </form>
  );
}

Validation Timing

Validation is less about the rules and more about when you show them. Fire too early and you scold users mid-type; fire too late and they're surprised at submit. The sweet spot for most forms is validate on blur, then re-validate on change once a field has been touched.

A clean way to structure this: keep a validate function that returns an errors object, track which fields are touched, and only display an error when its field is both touched and invalid.

function validate(values) {
  const errors = {};
  if (!values.email) {
    errors.email = 'Email is required';
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) {
    errors.email = 'Enter a valid email address';
  }
  if (values.password.length < 8) {
    errors.password = 'Password must be at least 8 characters';
  }
  return errors;
}

Accessible Forms

An inaccessible form locks out screen-reader and keyboard users — and often fails legal requirements. The good news: accessibility is mostly a few consistent habits.

• Pair every control with a <label htmlFor> that matches the input's id.
• Mark invalid fields with aria-invalid="true".
• Link the error text to the field with aria-describedby.
• Give the error container role="alert" so it's announced the moment it appears.
• On failed submit, move focus to the first invalid field.

function EmailField({ value, error, onChange }) {
  const invalid = Boolean(error);

  return (
    <div className="form-group">
      <label htmlFor="email">Email</label>
      <input
        id="email"
        name="email"
        type="email"
        value={value}
        onChange={onChange}
        aria-invalid={invalid}
        aria-describedby={invalid ? 'email-error' : undefined}
      />
      {invalid && (
        <div id="email-error" role="alert" className="error-message">
          {error}
        </div>
      )}
    </div>
  );
}

Async Submission States

Submitting almost always means an API call, which takes time and can fail. Track a status so the UI can disable the button, show a spinner label, and surface errors — never leaving the user wondering whether their click registered.

import { useState } from 'react';

function SubscribeForm() {
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState('idle'); // idle | submitting | success | error
  const [errorMsg, setErrorMsg] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('submitting');
    setErrorMsg('');

    try {
      const res = await fetch('/api/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });
      if (!res.ok) throw new Error('Subscription failed. Please try again.');
      setStatus('success');
      setEmail('');
    } catch (err) {
      setErrorMsg(err.message);
      setStatus('error');
    }
  };

  if (status === 'success') {
    return <p role="status">🎉 You're subscribed!</p>;
  }

  return (
    <form onSubmit={handleSubmit}>
      {status === 'error' && (
        <div role="alert" className="error-message">{errorMsg}</div>
      )}
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <button type="submit" disabled={status === 'submitting'}>
        {status === 'submitting' ? 'Subscribing…' : 'Subscribe'}
      </button>
    </form>
  );
}

When to Use a Library

Hand-rolling forms teaches you the fundamentals, but real projects with many fields, cross-field rules, and complex validation lean on a library. The modern standard is React Hook Form, often paired with a schema validator like Zod. It's fast (uncontrolled under the hood), tiny, and removes almost all the boilerplate.

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

// One schema describes the shape AND the rules.
const schema = z.object({
  username: z.string().min(3, 'At least 3 characters'),
  email: z.string().email('Enter a valid email'),
  password: z.string().min(8, 'At least 8 characters'),
});

function SignUpForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm({ resolver: zodResolver(schema) });

  const onSubmit = async (data) => {
    await fetch('/api/signup', {
      method: 'POST',
      body: JSON.stringify(data),
    });
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('username')} placeholder="Username" />
      {errors.username && <p role="alert">{errors.username.message}</p>}

      <input {...register('email')} placeholder="Email" />
      {errors.email && <p role="alert">{errors.email.message}</p>}

      <input type="password" {...register('password')} placeholder="Password" />
      {errors.password && <p role="alert">{errors.password.message}</p>}

      <button type="submit" disabled={isSubmitting}>Sign up</button>
    </form>
  );
}

Hands-on Exercise

import { useState } from 'react';

function validate(form) {
  const errors = {};
  if (form.username.trim().length < 3)
    errors.username = 'At least 3 characters';
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email))
    errors.email = 'Enter a valid email';
  if (form.password.length < 8)
    errors.password = 'At least 8 characters';
  if (form.confirm !== form.password)
    errors.confirm = 'Passwords do not match';
  return errors;
}

export default function SignUpForm() {
  const [form, setForm] = useState({
    username: '', email: '', password: '', confirm: '',
  });
  const [touched, setTouched] = useState({});
  const [submitting, setSubmitting] = useState(false);

  const errors = validate(form);
  const isValid = Object.keys(errors).length === 0;

  const handleChange = (e) =>
    setForm((f) => ({ ...f, [e.target.name]: e.target.value }));

  const handleBlur = (e) =>
    setTouched((t) => ({ ...t, [e.target.name]: true }));

  const handleSubmit = async (e) => {
    e.preventDefault();
    setTouched({ username: true, email: true, password: true, confirm: true });
    if (!isValid) return;

    setSubmitting(true);
    console.log('Submitting', form);
    // await fetch('/api/signup', { method: 'POST', body: JSON.stringify(form) });
    setSubmitting(false);
  };

  const field = (name, type = 'text', label = name) => {
    const invalid = touched[name] && errors[name];
    return (
      <div className="form-group">
        <label htmlFor={name}>{label}</label>
        <input
          id={name}
          name={name}
          type={type}
          value={form[name]}
          onChange={handleChange}
          onBlur={handleBlur}
          aria-invalid={Boolean(invalid)}
          aria-describedby={invalid ? `${name}-error` : undefined}
        />
        {invalid && (
          <div id={`${name}-error`} role="alert" className="error-message">
            {errors[name]}
          </div>
        )}
      </div>
    );
  };

  return (
    <form onSubmit={handleSubmit} noValidate>
      {field('username', 'text', 'Username')}
      {field('email', 'email', 'Email')}
      {field('password', 'password', 'Password')}
      {field('confirm', 'password', 'Confirm password')}
      <button type="submit" disabled={submitting}>
        {submitting ? 'Creating account…' : 'Sign up'}
      </button>
    </form>
  );
}

Summary & Quiz

📚 Further Reading

• React docs — <input> and controlled components
• React Hook Form — official docs
• MDN — Web forms & accessibility

🚀 What's Next?

Your forms now collect and validate data — but where does it go? Next, Connecting React Frontend to Express Backend wires this UI to a real API: sending requests, handling responses, and closing the full-stack loop.