React Controlled Components Explained — Forms, State and Real-World Patterns

import { useState } from 'react';

export default function UsernameInput() {
  // React owns the value — NOT the DOM
  const [username, setUsername] = useState('');

  function handleUsernameChange(event) {
    // We transform the value BEFORE storing it.
    // The input will always display what React has in state.
    const rawValue = event.target.value;
    const sanitised = rawValue.toLowerCase().replace(/\s/g, ''); // no spaces, always lowercase
    setUsername(sanitised);
  }

  return (
    <div>
      <label htmlFor="username">Username</label>
      {/* value={username} makes this a controlled input.
          Without this prop it becomes uncontrolled. */}
      <input
        id="username"
        type="text"
        value={username}          // ← React dictates what the input displays
        onChange={handleUsernameChange} // ← every keystroke goes through here
        placeholder="e.g. janedoe"
      />
      <p>Stored value: "{username}"</p>
    </div>
  );
}

import { useState } from 'react';

// Pure validation function — easy to unit test independently
function validateRegistration(fields) {
  const errors = {};

  if (!fields.email.includes('@')) {
    errors.email = 'Please enter a valid email address.';
  }

  if (fields.password.length < 8) {
    errors.password = 'Password must be at least 8 characters.';
  }

  if (fields.password !== fields.confirmPassword) {
    errors.confirmPassword = 'Passwords do not match.';
  }

  return errors; // empty object means no errors
}

export default function RegistrationForm() {
  // All field values in ONE state object — scales cleanly
  const [formValues, setFormValues] = useState({
    email: '',
    password: '',
    confirmPassword: '',
  });

  const [errors, setErrors] = useState({});
  const [isSubmitted, setIsSubmitted] = useState(false);

  // Generic handler: reads event.target.name to know WHICH field changed
  function handleFieldChange(event) {
    const { name, value } = event.target;
    setFormValues((previousValues) => ({
      ...previousValues,   // keep all other fields unchanged
      [name]: value,       // update only the field that triggered the event
    }));
  }

  function handleSubmit(event) {
    event.preventDefault(); // stop the browser reloading the page

    const validationErrors = validateRegistration(formValues);

    if (Object.keys(validationErrors).length > 0) {
      setErrors(validationErrors); // show errors, do NOT submit
      return;
    }

    // At this point the form is valid
    setErrors({});
    setIsSubmitted(true);
    console.log('Submitting registration:', formValues);
  }

  if (isSubmitted) {
    return <p>Thanks for registering, {formValues.email}!</p>;
  }

  return (
    <form onSubmit={handleSubmit} noValidate>
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="email"
          name="email"          // ← MUST match the key in formValues
          value={formValues.email}
          onChange={handleFieldChange}
        />
        {/* Only show an error message if one exists for this field */}
        {errors.email && <span style={{ color: 'red' }}>{errors.email}</span>}
      </div>

      <div>
        <label htmlFor="password">Password</label>
        <input
          id="password"
          type="password"
          name="password"
          value={formValues.password}
          onChange={handleFieldChange}
        />
        {errors.password && <span style={{ color: 'red' }}>{errors.password}</span>}
      </div>

      <div>
        <label htmlFor="confirmPassword">Confirm Password</label>
        <input
          id="confirmPassword"
          type="password"
          name="confirmPassword"
          value={formValues.confirmPassword}
          onChange={handleFieldChange}
        />
        {errors.confirmPassword && (
          <span style={{ color: 'red' }}>{errors.confirmPassword}</span>
        )}
      </div>

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

import { useState } from 'react';

export default function PreferencesForm() {
  const [preferences, setPreferences] = useState({
    newsletter: false,        // checkbox — boolean, not string
    experienceLevel: 'junior', // select dropdown
    bio: '',                  // textarea
  });

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

    setPreferences((prev) => ({
      ...prev,
      // For checkboxes use `checked`; for everything else use `value`
      [name]: type === 'checkbox' ? checked : value,
    }));
  }

  function handleSubmit(event) {
    event.preventDefault();
    console.log('Saved preferences:', preferences);
  }

  return (
    <form onSubmit={handleSubmit}>

      {/* CHECKBOX — bind to `checked`, not `value` */}
      <div>
        <label>
          <input
            type="checkbox"
            name="newsletter"
            checked={preferences.newsletter} // ← `checked` not `value`
            onChange={handleChange}
          />
          Subscribe to newsletter
        </label>
      </div>

      {/* SELECT — works exactly like a text input */}
      <div>
        <label htmlFor="experienceLevel">Experience Level</label>
        <select
          id="experienceLevel"
          name="experienceLevel"
          value={preferences.experienceLevel} // React auto-highlights the matching option
          onChange={handleChange}
        >
          <option value="junior">Junior (0–2 years)</option>
          <option value="mid">Mid (2–5 years)</option>
          <option value="senior">Senior (5+ years)</option>
        </select>
      </div>

      {/* TEXTAREA — use `value` prop, NOT children */}
      <div>
        <label htmlFor="bio">Short Bio</label>
        <textarea
          id="bio"
          name="bio"
          value={preferences.bio} // ← same pattern as input, not between tags
          onChange={handleChange}
          rows={4}
        />
      </div>

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

import { useRef } from 'react';

export default function FileUploadForm() {
  // useRef — we're NOT controlling this input, just reading it on submit
  const fileInputRef = useRef(null);

  function handleUploadSubmit(event) {
    event.preventDefault();

    // Access the files array directly from the DOM node via the ref
    const selectedFiles = fileInputRef.current.files;

    if (selectedFiles.length === 0) {
      alert('Please select a file first.');
      return;
    }

    const firstFile = selectedFiles[0];
    console.log('File name:', firstFile.name);
    console.log('File size (bytes):', firstFile.size);
    console.log('File type:', firstFile.type);

    // In production you'd send this to an API with FormData
  }

  return (
    <form onSubmit={handleUploadSubmit}>
      {/* File inputs CANNOT be controlled — use a ref instead */}
      <input
        type="file"
        ref={fileInputRef}
        accept="image/*"
      />
      <button type="submit">Upload</button>
    </form>
  );
}