Forms in React

Analogy categoryAnalogies

Introduction

Forms in React work differently from plain HTML forms because React typically treats form elements as controlled components, meaning their value is driven by React state rather than by the DOM itself. This gives you a single source of truth for input data, makes validation and conditional logic straightforward, and lets you respond to every keystroke. React also supports uncontrolled components, where the DOM manages its own state and you read values via refs when needed, which is useful for simple forms or integrating with non-React code.

🏏

Cricket analogy: A controlled scorecard is like the official scorer's single ledger driving every displayed number, nothing trusted unless written in the ledger first, making run-rate checks trivial; an uncontrolled scorecard is like a fan's mental tally read only when asked (via ref), fine for a backyard game.

Syntax

jsx

function LoginForm() {
  const [email, setEmail] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    console.log('Submitting:', email);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
      />
      <button type="submit">Log In</button>
    </form>
  );
}

Explanation

In a controlled component, the input's value prop is always set from state, and an onChange handler updates that state on every change, so the displayed value and the React state never drift apart. The form's onSubmit handler must call event.preventDefault() to stop the browser's default full-page reload behavior. Checkboxes and radio buttons use checked instead of value, while <select> elements use value on the <select> tag itself rather than a selected attribute on individual <option> elements. For forms with many fields, a single state object with computed keys (using the input's name attribute) avoids declaring a separate useState call per field.

🏏

Cricket analogy: A run-tally input's value always comes from state, and onChange updates it on every ball so the scoreboard never drifts from the ledger; submitting the innings summary must call preventDefault() to stop a page reload; a 'boundary' checkbox uses checked, and one state object keyed by each stat's name (runs, wickets, overs) replaces per-field useState.

Example

jsx

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

  function handleChange(event) {
    const { name, value } = event.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  }

  function handleSubmit(event) {
    event.preventDefault();
    console.log(formData);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" value={formData.username} onChange={handleChange} />
      <textarea name="bio" value={formData.bio} onChange={handleChange} />
      <button type="submit">Sign Up</button>
    </form>
  );
}

Output

As the user types into either field, handleChange updates only the corresponding key in formData using the input's name attribute, while the other field's value is preserved via the spread operator. On submit, the page does not reload, and the console logs the full formData object, e.g. { username: 'alice', bio: 'Hello!' }.

🏏

Cricket analogy: Typing into the 'player name' field updates only that key in the scorecard state using the input's name attribute, while the 'runs scored' field's value is preserved via the spread operator; on submit, the page doesn't reload and the console logs { player: 'Kohli', runs: '82' }.

Key Takeaways

Controlled components bind an input's value to React state and update it via onChange.
Always call event.preventDefault() in onSubmit to stop the default page reload.
Use the name attribute plus a single state object to manage multiple fields with one handler.
Checkboxes use checked; select elements set value on the <select> tag, not on <option>.
Uncontrolled components use refs to read values directly from the DOM when full React control isn't needed.