Frontend Engineering | VoidX Academy

27. Forms (Controlled Inputs)

Taking Control of Inputs

In standard HTML, input fields (like <input>, <textarea>, and <select>) maintain their own internal state. If a user types 'Hello', the input stores that text in the DOM. In React, we don't want the DOM managing data—we want React to be the 'Single Source of Truth'. We solve this using Controlled Components.

What is a Controlled Input?

A controlled input is an input field where React entirely dictates what is shown on the screen. We bind the input's value to a React state variable, and we update that state using the onChange event.

import { useState } from 'react';

export default function SignupForm() {
  // 1. Create a state variable to hold the input's value
  const [email, setEmail] = useState('');

  return (
    <form>
      <label>Email Address:</label>
      <input 
        type='email' 
        // 2. Bind the input's visible value to the React state
        value={email} 
        // 3. When the user types, update the React state
        onChange={(e) => setEmail(e.target.value)} 
      />
      <p>You are typing: {email}</p>
    </form>
  );
}

Handling Multiple Inputs Safely

If you have a form with 10 inputs (First Name, Last Name, Password, Address...), creating 10 separate useState variables gets incredibly messy. The professional pattern is to use a single state object and dynamically update it using the input's name attribute.

import { useState } from 'react';

export default function ComplexForm() {
  // A single object holds all form data
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

  // A single, reusable handler function
  const handleChange = (e) => {
    // e.target.name is the 'name' attribute of the input (e.g., 'username')
    // e.target.value is what was typed
    setFormData({
      ...formData, // Spread the existing data so we don't overwrite the other fields
      [e.target.name]: e.target.value // Dynamically update the specific field being typed in
    });
  };

  return (
    <form>
      <input name='username' value={formData.username} onChange={handleChange} />
      <input name='password' type='password' value={formData.password} onChange={handleChange} />
    </form>
  );
}

Form Submission

Never rely on action URLs in React forms. Attach an onSubmit handler to the <form> tag itself (not the submit button), and always call e.preventDefault() to stop the browser from refreshing.

Knowledge Check

Ready to test your understanding of 27. Forms (Controlled Inputs)?

26. Lists & Keys

28. Lifting State Up