Forms in React — React Tutorial

Controlled Components

In React, form inputs are typically controlled components — their values are driven by React state. When the user types, an onChange handler updates state, and the input displays the state value.

This gives React full control over the form data, making it easy to validate, transform, or submit.

Example

function SignupForm() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
  });
  const [errors, setErrors] = useState({});

  function handleChange(e) {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  }

  function handleSubmit(e) {
    e.preventDefault();
    const newErrors = {};
    if (!formData.username) newErrors.username = 'Username required';
    if (!formData.email) newErrors.email = 'Email required';
    if (formData.password.length < 6) newErrors.password = 'Min 6 characters';

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }
    console.log('Form submitted:', formData);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" value={formData.username}
        onChange={handleChange} placeholder="Username" />
      {errors.username && <span>{errors.username}</span>}

      <input name="email" value={formData.email}
        onChange={handleChange} placeholder="Email" />
      {errors.email && <span>{errors.email}</span>}

      <input name="password" type="password" value={formData.password}
        onChange={handleChange} placeholder="Password" />
      {errors.password && <span>{errors.password}</span>}

      <button type="submit">Sign Up</button>
    </form>
  );
}

Controlled inputs have their value set by React state
onChange updates state, which updates the input display
Use e.target.name and e.target.value for dynamic field handling
Validate on submit or on change as needed
Use e.preventDefault() to prevent page reload on form submit

Notes

For complex forms, consider libraries like React Hook Form or Formik which reduce boilerplate and provide built-in validation.