Building Controlled Forms with React

What are Controlled Components?

In standard HTML, form elements like <input>, <textarea>, and <select> maintain their own state and update it based on user input. In React, we can use a technique called controlled components to let React state be the "single source of truth" for the form data.

The flow works like this:

1. A React state variable (created with useState) holds the current value of the input.
2. The input element's value attribute is bound to that state variable.
3. An onChange event handler on the input updates the state variable whenever the user types.

This gives React full control over the form element's value, making it easier to manage, validate, and react to changes.

Handling Multiple Inputs Efficiently

While you could create a separate useState for every single input field, this quickly becomes repetitive and difficult to manage in larger forms. A much better practice is to use a single state object to hold the values for all your inputs.

To make this work, we'll create a single handleChange function that can dynamically update the correct property in our state object. We do this by giving each input a name attribute that matches the corresponding key in our state object.

Inside handleChange, we can access event.target.name to know which input changed and event.target.value to get its new value.

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

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevFormData => ({
      ...prevFormData,
      [name]: value // Using computed property name to update the right key
    }));
  };

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

The key piece of syntax here is [name]: value. This is an ES6 feature called computed property names, which allows you to use a variable as a key in an object literal.

Implementing Form Validation

Now that React controls our form's state, we can easily implement validation. A simple and effective way to start is by using built-in HTML5 validation attributes.

Attributes like required, minLength, maxLength, type="email", and pattern (which accepts a regular expression) let the browser do the initial validation work for us.

Improving Validation UX: When to Show Errors

Showing validation errors is a perfect use case for the conditional rendering skills you learned previously. However, when you show them is crucial for a good user experience.

• onChange: Showing an error on every keystroke can be annoying.
• onSubmit: Waiting until the user submits the form can be too late.
• onBlur: Showing an error after the user has finished with an input (and "blurred" away from it) is often the best balance.

To implement this, we can track which fields have been "touched" by the user. We'll add an onBlur event handler to our inputs. When a field is blurred, we mark it as touched and can then conditionally display an error message if the field is invalid and has been touched.

This is where your knowledge of conditional rendering shines. The pattern for showing an error message would look like this in JSX:

{errors.email && touched.email && <span>{errors.email}</span>}

This uses the logical && operator we covered. The error message will only be rendered if an error exists and the field has been touched.

Handling Form Submission

The final step is handling the form submission itself.

1. Attach an onSubmit event handler to the <form> element.
2. In the handler function, call event.preventDefault() to stop the browser from performing a full-page reload.
3. At this point, your complete, validated form data is available in your state object, ready to be sent to an API.

A great UX touch is to disable the submit button until all required fields are valid.

import React, { useState } from 'react';

function LoginForm() {
  const [formData, setFormData] = useState({
    email: '',
    password: '',
  });
  
  // State to track if the password field has been touched
  const [passwordTouched, setPasswordTouched] = useState(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };
  
  const handlePasswordBlur = () => {
    setPasswordTouched(true);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted:', formData);
    alert(`Welcome, ${formData.email}!`);
  };

  // Validation logic
  const isPasswordInvalid = passwordTouched && formData.password.length > 0 && formData.password.length < 8;
  const canSubmit = formData.email !== '' && formData.password !== '';

  return (
    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '10px', maxWidth: '300px' }}>
      <h2>Login</h2>
      <div>
        <label htmlFor="email">Email</label>
        <input
          type="email"
          id="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
          required
        />
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input
          type="password"
          id="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
          onBlur={handlePasswordBlur} // Mark as touched on blur
          minLength="8"
          required
        />
        {isPasswordInvalid && <p style={{ color: 'red', margin: 0 }}>Password must be at least 8 characters.</p>}
      </div>
      <button type="submit" disabled={!canSubmit}>
        Log In
      </button>
    </form>
  );
}

export default LoginForm;

Conclusion

Congratulations on completing the React Fundamentals module! Handling forms is a complex but essential part of frontend development, and you've now learned the core patterns for doing it effectively in React.

Key Takeaways:

• Controlled components use React state as the single source of truth for form inputs.
• Use a single state object and a dynamic handleChange function with the name attribute to manage multiple inputs efficiently.
• Leverage HTML5 validation attributes (required, pattern, etc.) for quick and powerful client-side validation.
• Improve user experience by showing validation errors onBlur (when a user leaves an input) rather than on every change.
• Always use event.preventDefault() in your onSubmit handler to prevent a full-page reload.

In our next module, we'll begin our Mid-Course Project: a Movie Search Application. You will immediately put today's lesson into practice by building the search input component that will power the entire application.