← Back to all tutorials
React TutorialEpisode 28

Submit Events

Handle form submission events in React.

Use onSubmit to handle form submissions.

Handling Submit

const handleSubmit = (e) => {
  e.preventDefault();  // prevent page reload
  const blog = { title, body, author };
  console.log(blog);
};

<form onSubmit={handleSubmit}>
  {/* inputs */}
  <button>Add Blog</button>
</form>

e.preventDefault()

By default, form submission refreshes the page. preventDefault() stops this so React can handle it client-side.