React Forms Submit

React Forms Submit

Handling form submissions natively in React is done by adding an onSubmit event handler to the wrapper <form> element.

Handling Submit Events

When intercepting a form submission, you should always call e.preventDefault() inside your handler function. This crucial step prevents the default HTML form submission behavior, which would otherwise reload the entire page and erase your React state.

function SubmitForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    alert("Form has been submitted successfully!");
  };

  return <form onSubmit={handleSubmit}><button type="submit">Submit</button></form>;
}