How to handle form submission in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Proper form submission handling is essential for creating responsive user interfaces and preventing unwanted page reloads in React applications.
As the creator of CoreUI, a widely used open-source UI library, I’ve implemented form submission logic in hundreds of production components over my 25 years of development experience.
From my expertise, the best approach is to use the onSubmit event handler on the form element combined with preventDefault() to maintain full control over the submission process.
This pattern ensures smooth user experience and proper data handling.
Use onSubmit event handler with preventDefault() to control form submission behavior.
const handleSubmit = (e) => {
e.preventDefault()
console.log('Form submitted:', formData)
// Process form data here
}
return <form onSubmit={handleSubmit}>/* form fields */</form>
Here the handleSubmit function receives the event object and calls preventDefault() to stop the browser’s default form submission behavior. This prevents page reload and allows you to handle the form data with JavaScript. You can then process the form data, validate it, send it to an API, or update component state as needed.
Best Practice Note:
This is the same approach we use in CoreUI form components for reliable form handling. Always validate form data before submission and consider showing loading states during async operations to improve user experience.
