Categories
React Answers

How to prevent form submission with React?

Spread the love

Sometimes, we want to prevent form submission with React.

In this article, we’ll look at how to prevent form submission with React.

How to prevent form submission with React?

To prevent form submission with React, we call e.preventDefault in the form element’s onSubmit handler.

For instance, we write

<form onSubmit={(e) => e.preventDefault()}>
  <button onClick={handleClick}>Click Me</button>
</form>;

to add a form with the onSubmit prop set to a function that calls e.preventDefault to prevent form submission.

We set the button’s onClick prop to the handleClick function to run it when we click the button.

Conclusion

To prevent form submission with React, we call e.preventDefault in the form element’s onSubmit handler.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *