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)
Handling form submission in React requires using the onSubmit event handler with preventDefault to control form behavior and process data programmatically. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented form submission handling in thousands of React applications for user registration, data entry, and API interactions. From my expertise, the most effective approach is using controlled components with onSubmit handler that prevents default browser behavior. This method provides full control over form validation, data processing, and user feedback during submission.
Use onSubmit event handler with preventDefault() to control form submission behavior.
import { useState } from 'react'
function ContactForm() {
let [formData, setFormData] = useState({
name: '',
email: '',
message: ''
})
let [isSubmitting, setIsSubmitting] = useState(false)
let handleInputChange = (event) => {
let { name, value } = event.target
setFormData(prev => ({ ...prev, [name]: value }))
}
let handleSubmit = async (event) => {
event.preventDefault()
setIsSubmitting(true)
try {
// Simulate API call
await new Promise(resolve => setTimeout(resolve, 1000))
console.log('Form submitted:', formData)
// Reset form after successful submission
setFormData({ name: '', email: '', message: '' })
alert('Form submitted successfully!')
} catch (error) {
console.error('Submission error:', error)
alert('Error submitting form')
} finally {
setIsSubmitting(false)
}
}
return (
<form onSubmit={handleSubmit}>
<input
name="name"
value={formData.name}
onChange={handleInputChange}
placeholder="Your Name"
required
/>
<input
name="email"
type="email"
value={formData.email}
onChange={handleInputChange}
placeholder="Your Email"
required
/>
<textarea
name="message"
value={formData.message}
onChange={handleInputChange}
placeholder="Your Message"
required
/>
<button type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Submitting...' : 'Submit'}
</button>
</form>
)
}
The onSubmit handler receives the form event and calls preventDefault() to stop the default browser form submission. Use async/await for API calls and manage loading states to provide user feedback. Always handle both success and error cases for robust form handling.
Best Practice Note:
This is the same form submission pattern we use in CoreUI React components for reliable data processing. Always validate data before submission and provide clear feedback to users during the submission process.
