Controlled Components: Managing Form Input State in React

Previously in this course, we explored handling form submissions by intercepting the default browser behavior. While preventing the page reload is the first step, it doesn't give us access to the data the user typed.

In this lesson, we move from simply "catching" a form event to actively managing the data inside it. By using controlled components, we make React the "single source of truth" for our form data, allowing us to validate, format, and clear inputs in real-time.

Understanding Controlled Components from First Principles

In standard HTML, form elements like <input> or <textarea> maintain their own internal state. When a user types, the browser automatically updates the input's visual value. This is "uncontrolled" because React has no idea what’s happening inside that box unless you specifically reach out to grab it (usually via a ref).

A controlled component flips this logic. Instead of the DOM owning the value, we store the input's value in a React state variable. The input element then reflects that state via the value prop. Whenever the user types, we trigger an onChange event, update the state, and React re-renders the component to display the new value.

This might seem like extra work, but it provides a massive benefit: your UI is always a direct reflection of your application's state.

Worked Example: A Multi-Input Movie Review Form

Let’s advance our movie-browser project by adding a "Review" feature. We need a form that accepts a movie title and a personal rating.

To handle multiple inputs without writing a separate state variable for every single field, we can store our data in a single object.

JSX
import { useState } from CE9178">'react';

function ReviewForm() {
  const [formData, setFormData] = useState({
    title: CE9178">'',
    rating: CE9178">''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    // We use the functional update pattern to merge new values
    setFormData((prev) => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(CE9178">'Submitted Review:', formData);
    
    // Resetting the form
    setFormData({ title: CE9178">'', rating: CE9178">'' });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="title"
        value={formData.title}
        onChange={handleChange}
        placeholder="Movie Title"
      />
      <input
        name="rating"
        type="number"
        value={formData.rating}
        onChange={handleChange}
        placeholder="Rating (1-10)"
      />
      <button type="submit">Submit Review</button>
    </form>
  );
}

Why this works

1. State Binding: The value prop of each input is tied directly to formData.
2. Dynamic Keys: By using [name]: value in our handleChange function, we use the input's name attribute as the key in our state object. This allows one function to handle any number of inputs.
3. Resetting: Because we control the value through state, calling setFormData with empty strings effectively clears the inputs in the UI instantly.

Hands-on Exercise

Modify your existing MovieCard or create a new AddMovieForm component.

1. Create a form with three inputs: title, director, and year.
2. Use a single state object to track all three.
3. Ensure that clicking the "Submit" button logs the object to the console and clears all three input fields.

Common Pitfalls

• Forgetting onChange: If you provide a value prop but no onChange handler, the input will become read-only. The user won't be able to type anything.
• Direct Mutation: Never do formData.title = 'New Title'. Always use the setFormData setter function to ensure React triggers a re-render.
• Missing name attributes: Our handleChange trick relies on e.target.name matching the keys in our state object. If you forget to add the name attribute to your HTML input, the state update will fail.
• Complexity Overload: If your form gets massive (20+ fields), consider using a library like React Hook Form. But for 90% of use cases, the pattern above is the industry standard.

For a deeper look into the trade-offs, you can revisit React form handling: Controlled vs. Uncontrolled Components. Remember that understanding the React state snapshot mental model will help you debug why your inputs might behave unexpectedly during rapid typing.

Recap

Controlled components turn form inputs into predictable, state-driven UI elements. By binding the value to state and syncing it via onChange, we gain full control over data flow. We’ve learned that managing multiple inputs with a single state object keeps our code clean, and resetting forms is as simple as updating that same state object on submit.

Up next: We'll look at how events propagate through the DOM tree and how to manage them in Event Bubbling and Propagation.