Form handling in React

Introduction

Forms let users send information to your app. Handling forms in React helps you control what users type and respond to it easily.

When you want to collect user input like names or emails.

When you need to update the app as the user types.

When you want to check if the input is correct before sending it.

When you want to show messages or errors based on user input.

When you want to clear or reset the form after submission.

Syntax

React

function MyForm() {
  const [value, setValue] = React.useState('');

  function handleChange(event) {
    setValue(event.target.value);
  }

  function handleSubmit(event) {
    event.preventDefault();
    alert(`You typed: ${value}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="inputId">Enter text:</label>
      <input
        id="inputId"
        type="text"
        value={value}
        onChange={handleChange}
        aria-label="Text input"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Use useState to keep track of input values.

Use event.preventDefault() in submit handler to stop page reload.

Examples

Simple text input controlled by React state.

React

const [name, setName] = React.useState('');

<input
  type="text"
  value={name}
  onChange={e => setName(e.target.value)}
  aria-label="Name input"
/>

Form with submit handler that logs input value and prevents page reload.

React

<form onSubmit={e => {
  e.preventDefault();
  console.log('Submitted:', name);
}}>
  <input
    type="text"
    value={name}
    onChange={e => setName(e.target.value)}
    aria-label="Name input"
  />
  <button type="submit">Send</button>
</form>

Checkbox input controlled by React state.

React

const [checked, setChecked] = React.useState(false);

<input
  type="checkbox"
  checked={checked}
  onChange={e => setChecked(e.target.checked)}
  aria-label="Accept terms"
/>

Sample Program

This React component shows a simple email subscription form. It updates the input as you type, prevents page reload on submit, shows a thank you message, and clears the input.

React

import React from 'react';

export default function SimpleForm() {
  const [email, setEmail] = React.useState('');
  const [message, setMessage] = React.useState('');

  function handleChange(event) {
    setEmail(event.target.value);
  }

  function handleSubmit(event) {
    event.preventDefault();
    setMessage(`Thanks for submitting: ${email}`);
    setEmail('');
  }

  return (
    <main>
      <h1>Subscribe to newsletter</h1>
      <form onSubmit={handleSubmit} aria-label="Subscription form">
        <label htmlFor="emailInput">Email:</label>
        <input
          id="emailInput"
          type="email"
          value={email}
          onChange={handleChange}
          required
          aria-required="true"
          aria-describedby="msg"
        />
        <button type="submit">Subscribe</button>
      </form>
      <p id="msg" role="status" aria-live="polite">{message}</p>
    </main>
  );
}

Important Notes

Always add aria-label or label for accessibility.

Use required attribute to make inputs mandatory.

Clear input after submit to improve user experience.

Summary

React forms use state to control input values.

Use event handlers to update state and handle submit.

Accessibility and preventing page reload are important.