onSubmit is the React event prop attached to a form element, firing when the form is submitted, most commonly used together with event.preventDefault() to handle submission with JavaScript instead of a full page reload.

Syntax

<form onSubmit={handleSubmit}>...</form>

Deep Dive Course

onSubmit fires when a form is submitted, either by clicking a submit-type button inside it or by pressing Enter within a text input inside the form — by default, a browser's native form submission triggers a full page reload/navigation, which is almost never the desired behavior in a React single-page application, so calling event.preventDefault() as the very first line inside the handler is the standard, near-universal pattern to stop that default behavior and handle the submitted data with JavaScript instead.

1Understanding onSubmit

💡

Call event.preventDefault() as the first line of virtually every onSubmit handler in a React app — forgetting it causes the browser's default full-page reload/navigation to happen, which typically breaks the single-page application experience entirely.

editor.html

function LoginForm() {
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted, no page reload occurred');
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" />
      <button type="submit">Log In</button>
    </form>
  );
}

localhost:3000

2Practical Example

Here is a real-world application of onSubmit showing how it is used in production React code.

editor.html

function ContactForm() {
  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    console.log('Email:', formData.get('email'));
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" defaultValue="user@example.com" />
      <button type="submit">Send</button>
    </form>
  );
}

localhost:3000

3Best Practices

Follow these guidelines when working with onSubmit:

1. Call event.preventDefault() at the start of an onSubmit handler to stop the browser's default full-page reload/navigation

2. Attach onSubmit to the form element itself, not to the submit button's onClick, so the handler correctly fires for both button clicks and pressing Enter in an input

3. Perform form validation, then any actual data submission logic like an API call, inside the onSubmit handler after preventing the default behavior

⚠️

Tip: Call event.preventDefault() as the first line of virtually every onSubmit handler in a React app — forgetting it causes the browser's default full-page reload/navigation to happen, which typically breaks the single-page application experience entirely.

editor.html

function LoginForm() {
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted, no page reload occurred');
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" />
      <button type="submit">Log In</button>
    </form>
  );
}

localhost:3000

Examples

Example 01Basic Usage

function LoginForm() {
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted, no page reload occurred');
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" />
      <button type="submit">Log In</button>
    </form>
  );
}

Example 02Advanced Example

function ContactForm() {
  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    console.log('Email:', formData.get('email'));
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" defaultValue="user@example.com" />
      <button type="submit">Send</button>
    </form>
  );
}

Best Practices

Call event.preventDefault() at the start of an onSubmit handler to stop the browser's default full-page reload/navigation
Attach onSubmit to the form element itself, not to the submit button's onClick, so the handler correctly fires for both button clicks and pressing Enter in an input
Perform form validation, then any actual data submission logic like an API call, inside the onSubmit handler after preventing the default behavior

Interview Question

Why is onSubmit attached to the form element itself, rather than an onClick handler on the submit button, the correct way to handle form submission in React?▼

Hint: Think about the different ways a form can actually be submitted, beyond just clicking a specific button.

A form can be submitted in more than one way, most commonly by clicking a submit-type button, but also by pressing Enter while focus is inside a text input within that form, a standard, expected browser behavior that many users rely on without necessarily even clicking a button at all. An onClick handler attached only to the submit button would completely miss that Enter-key submission case, since the button was never actually clicked in that scenario, meaning some submissions would silently fail to trigger the intended handler. The form's own onSubmit event, by contrast, fires consistently regardless of which of these methods actually triggered the submission, since the browser considers both cases a genuine form submission and dispatches the same event either way, which is exactly why attaching the handler to onSubmit on the form itself, rather than onClick on the button, correctly and consistently captures every valid way a user might submit that form.

Exercises

MediumPractice using onSubmit in a real scenario.

View Solution

function LoginForm() {
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted, no page reload occurred');
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" />
      <button type="submit">Log In</button>
    </form>
  );
}

Frequently Asked Questions

Why is onSubmit attached to the form element itself, rather than an onClick handler on the submit button, the correct way to handle form submission in React?▼

Related Functions

onchangeform-handlingform-validation