Chapter 10: Forms & Controlled Components

1. Controlled vs. Uncontrolled Components

The distinction between controlled and uncontrolled inputs is fundamental to frontend architecture:

Basic Controlled Input Example:

import { useState } from 'react';

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

  return (
    <div>
      <label htmlFor="emailInput">Email Address:</label>
      <input
        id="emailInput"
        type="email"
        value={email} // Value strictly driven by React state
        onChange={(e) => setEmail(e.target.value)} // State updated on every keystroke
      />
      <p>Typed Email: {email}</p>
    </div>
  );
}

2. Handling Multiple Inputs with a Single State Object

Creating a separate useState hook for 10 different form fields leads to unnecessary boilerplate. Instead, store form data inside a single object and use computed property names matching the input's name attribute:

import { useState } from 'react';

function RegistrationForm() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    role: 'developer',
    termsAccepted: false
  });

  function handleChange(event) {
    const { name, value, type, checked } = event.target;

    setFormData(prev => ({
      ...prev,
      // Checkboxes use the 'checked' boolean, while text inputs use 'value'
      [name]: type === 'checkbox' ? checked : value
    }));
  }

  function handleSubmit(event) {
    event.preventDefault();
    console.log("Submitting payload to API:", formData);
  }

  return (
    <form onSubmit={handleSubmit} className="p-3 border rounded">
      <div className="mb-3">
        <label>Username</label>
        <input 
          type="text" 
          name="username" 
          value={formData.username} 
          onChange={handleChange} 
        />
      </div>

      <div className="mb-3">
        <label>Role</label>
        <select name="role" value={formData.role} onChange={handleChange}>
          <option value="developer">Software Developer</option>
          <option value="designer">UI/UX Designer</option>
          <option value="manager">Product Manager</option>
        </select>
      </div>

      <div className="mb-3">
        <label>
          <input 
            type="checkbox" 
            name="termsAccepted" 
            checked={formData.termsAccepted} 
            onChange={handleChange} 
          />
          I accept terms and conditions
        </label>
      </div>

      <button type="submit" disabled={!formData.termsAccepted}>
        Register Account
      </button>
    </form>
  );
}

3. Uncontrolled Components & File Uploads

In an uncontrolled component, you query the DOM element directly when the form is submitted using useRef(). This is the mandatory pattern when handling file inputs (<input type="file" />):

import { useRef } from 'react';

function AvatarUploadForm() {
  const fileInputRef = useRef(null);
  const notesInputRef = useRef(null);

  function handleUpload(e) {
    e.preventDefault();
    
    // Access the raw DOM elements directly
    const selectedFile = fileInputRef.current.files[0];
    const notes = notesInputRef.current.value;

    if (!selectedFile) {
      alert("Please select an image file first.");
      return;
    }

    const payload = new FormData();
    payload.append("avatar", selectedFile);
    payload.append("notes", notes);

    console.log("Uploading file to cloud server...");
  }

  return (
    <form onSubmit={handleUpload}>
      <input type="file" ref={fileInputRef} accept="image/*" />
      <input type="text" ref={notesInputRef} placeholder="Avatar notes..." />
      <button type="submit">Upload Photo</button>
    </form>
  );
}

4. Form Validation Patterns & Best Practices

Robust form UX relies on clear, immediate feedback. Professional teams implement a three-tiered validation strategy:

Frequently Asked Questions (FAQ)