Forms in React: Controlled Components

You've mastered the "controlled component" pattern for a single text input, which is the foundation of form handling in React. This pattern—State + `value` + `onChange`—provides a robust "single source of truth" and gives you complete control.

But real-world forms are rarely just one field. They have multiple inputs, dropdowns, checkboxes, and complex validation. Let's explore how to scale the controlled component pattern to build any form you need.

1. Handling Multiple Inputs

You have two primary approaches for managing a form with many fields:

• Multiple `useState` Hooks: Simple and clear for a few inputs.

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

• Single State Object: More scalable for large forms. To update one field, you use the spread (`...`) operator to copy the old state and then overwrite the specific field.

  const [formData, setFormData] = useState({
    email: '',
    password: ''
  });

When using a single state object, you can write a **single generic handler** by giving each input a `name` attribute that matches its key in the state object.

const handleChange = (e) => {
  const { name, value } = e.target;
  setFormData(prevData => ({
    ...prevData,
    [name]: value // [name] is computed property syntax
  }));
}

<input name="email" value={formData.email} onChange={handleChange} />
<input name="password" value={formData.password} onChange={handleChange} />

2. Handling Other Form Elements

The controlled pattern adapts slightly for different input types.

Textarea

A `<textarea>` in React is surprisingly simple. Instead of using children (like in HTML), you just use the `value` prop, exactly like an `<input>`.

<textarea value={bio} onChange={(e) => setBio(e.target.value)} />

Select (Dropdown)

Similarly, you don't use the `selected` attribute on `<option>` tags. You control the selected value by setting the `value` prop on the root `<select>` tag.

<select value={userRole} onChange={(e) => setUserRole(e.target.value)}>
  <option value="user">User</option>
  <option value="admin">Admin</option>
</select>

Checkboxes

Checkboxes are different. You don't read `e.target.value`. Instead, you read the boolean `e.target.checked`.

const [agreed, setAgreed] = useState(false);

<input
  type="checkbox"
  checked={agreed} // Use 'checked' prop, not 'value'
  onChange={(e) => setAgreed(e.target.checked)}
/>

3. Client-Side Validation

Since your form's data lives in state, you can validate it at any time. A common pattern is to run validation inside the `onSubmit` handler *before* sending data to a server. You can store error messages in another state object.

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

const handleSubmit = (e) => {
  e.preventDefault();
  const newErrors = {};

  if (formData.password.length < 8) {
    newErrors.password = 'Password must be at least 8 characters';
  }
  if (!formData.email.includes('@')) {
    newErrors.email = 'Must be a valid email';
  }

  setErrors(newErrors);

  // Only submit if there are no errors
  if (Object.keys(newErrors).length === 0) {
    console.log('Form is valid!', formData);
    // ...send data to API
  }
}

// In your JSX:
<input name="email" ... />
{errors.email && <p className="error">{errors.email}</p>}

4. The "Uncontrolled" Alternative: `useRef`

For very simple forms or when integrating with non-React code, you can use "uncontrolled components." Here, the DOM stores the value, not React state. You use the `useRef` hook to get a reference to the DOM node and pull its value *only* when you need it (like on submit).

const emailRef = useRef(null);

const handleSubmit = (e) => {
  e.preventDefault();
  // Access the value directly from the DOM node
  console.log(emailRef.current.value);
}

// No value or onChange. Just 'ref'.
<input type="email" ref={emailRef} />

**When to use uncontrolled?** Almost never. Always default to **controlled components**. They are more predictable and fit the React data flow. Uncontrolled is only for rare cases, like managing file inputs (`<input type="file">`).

Key Takeaway: The controlled component pattern scales to all form types. Use a single state object and computed property names (`[name]`) for clean, multi-input forms. Always prefer controlled components over uncontrolled for a predictable, React-centric data flow.