How to Prevent Default Form Submission in React

To prevent the default form submission in React, call e.preventDefault() inside the form's onSubmit handler. This stops the browser from reloading the page so your own logic can read the values and decide what happens next. The method is part of the browser event system, not a React invention.

What the browser does by default

When a submit button inside a form is clicked, the browser sends the form data to the current URL and reloads the page. That default is useful for plain HTML, but a React app usually wants to keep the user on the page and handle the data itself, often by sending it to an API.

Stop the reload

Call e.preventDefault() as the first line of the submit handler. The event object is passed to the handler automatically, and the method must run before any code that reads or submits the data.

App.jsx

function handleSubmit(e) {
  e.preventDefault();
  const query = new FormData(e.target).get("query");
  alert(`You searched for ${query}`);
}

The handler stops the reload, then reads the query field through FormData. Wire it to a form with the onSubmit prop.

App.jsx

<form onSubmit={handleSubmit}>
  <input name="query" />
  <button type="submit">Search</button>
</form>

Typing a query and pressing Enter no longer reloads the page. The handler runs instead, reads the value from FormData, and shows it in an alert while the page stays put. Without that first call, the browser would reload before the alert could appear.

Read values after preventing

Once the reload is stopped, the handler owns the submission. The usual next step is to read the fields and send them somewhere, which the FormData guide covers in full. You can also disable the submit button while a request is in flight to prevent double submissions.

preventDefault is not stopPropagation

The two methods solve different problems and are easy to confuse. Calling one does not imply the other.

• e.preventDefault() cancels the browser's default action, such as a form reload or a link navigation.
• e.stopPropagation() stops the event from bubbling up to parent handlers.

A submit handler that must both stop the reload and keep a parent click handler from firing would call both, each for its own reason.

What to learn next

Preventing the default is one part of the submit event, and the event handling overview explains the rest. The same pattern applies to links, where e.preventDefault() stops navigation so you can handle the click entirely in React.