Controlled Forms with useState

What Are Controlled Components?

In React, the term "controlled component" refers to a form input whose value is controlled by React state. Instead of the HTML input element managing its own internal state (like what happens by default), we let our component's state be the "single source of truth."

This creates a two-way data binding loop:

1. State to UI: The React state dictates what the input field displays.
2. UI to State: User actions (like typing) trigger an event handler that updates the React state.

This gives us complete control over the form data at all times.

Let's see how to implement this pattern.

1. The Core Pattern: Controlled Text Inputs

The most common form element is the text input. Creating a controlled text input requires two key pieces:

1. A useState variable to hold the input's value.
2. Binding the input's value attribute to this state variable.
3. Using the onChange event handler to update the state with the user's input, which we get from event.target.value.

The following video provides a clear, step-by-step demonstration.

To summarize the pattern for a text input:

import { useState } from 'react';

function MyForm() {
  // 1. Declare a state variable to hold the input value
  const [name, setName] = useState('');

  return (
    <input
      type="text"
      // 2. Bind the input's value to the state variable
      value={name}
      // 3. Update the state when the user types
      onChange={(e) => setName(e.target.value)}
    />
  );
}

This same pattern applies directly to <textarea> elements as well, as they also use the value and onChange attributes in the same way.

For a deeper conceptual reading on this topic, the article "Data binding in React" by Josh W. Comeau is an excellent resource. You can refer to the introductory section to reinforce your understanding of controlled fields.

2. Handling Selects and Checkboxes

While other inputs follow a similar principle, there are slight but important differences in their implementation.

Select (Dropdown) Menus

A <select> element is handled almost identically to a text input. You bind the value prop on the <select> tag itself to your state variable, and the onChange handler will give you the chosen <option>'s value.

The pattern for a select input:

const [selection, setSelection] = useState('option1');

<select value={selection} onChange={(e) => setSelection(e.target.value)}>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

Checkbox Inputs

Checkboxes are a bit different. Instead of a text value, their state is binary: checked or unchecked (a boolean).

• Instead of the value attribute, we use the checked attribute to control its state.
• In the onChange handler, we get the new state from event.target.checked, which will be true or false.

This video explains it clearly.

The pattern for a checkbox:

const [isChecked, setIsChecked] = useState(false);

<label>
  <input
    type="checkbox"
    // Use the `checked` attribute for checkboxes
    checked={isChecked}
    // Update state using the boolean from `e.target.checked`
    onChange={(e) => setIsChecked(e.target.checked)}
  />
  Accept terms and conditions
</label>

The Big Picture

The simple patterns you learned today are the building blocks for any form in React, no matter how complex. By combining them, you can build rich, interactive forms.

In a form with many fields like the one above, you'll often manage all the values in a single state object rather than many separate useState calls. We'll cover that more efficient pattern in an upcoming lesson on building a multi-field contact form.

Conclusion

You've now learned how to connect form inputs to React's state management system, giving you full control over user data. This is a crucial step toward building the interactive applications you're aiming for, like your e-commerce project.

Key Takeaways:

• Controlled Components: Form inputs whose values are controlled by React state. The state is the single source of truth.
• Text and Select Inputs: Use the value attribute to display the state and e.target.value in the onChange handler to update it.
• Checkbox Inputs: Use the checked attribute to display the state and e.target.checked in the onChange handler to update it.
• The Two-Way Loop: The value/checked prop sends state to the input, and the onChange prop sends user actions back to update the state.

Preview of Next Lesson:
Now that we can control the data within our form inputs, the next logical step is to do something with that data. In the next lesson, we will learn how to handle form submission, including preventing the default browser behavior.