How to handle multiple form fields in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Managing multiple form fields efficiently is crucial for building scalable React forms without repetitive code. As the creator of CoreUI, a widely used open-source UI library, I’ve built countless form components over 25 years of development experience. From my expertise, the most efficient approach is to use a single state object combined with computed property names to handle all fields dynamically. This pattern reduces code duplication and makes form management much more maintainable.
Use a single state object with computed property names to handle multiple form fields.
const [formData, setFormData] = useState({ name: '', email: '', message: '' })
const handleChange = (e) => {
setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }))
}
Here the formData state holds all form field values in one object. The handleChange function uses computed property names [e.target.name] to dynamically update the correct field based on the input’s name attribute. The spread operator preserves existing values while updating only the changed field, ensuring efficient re-renders.
Best Practice Note:
This is the same pattern we use in CoreUI form components for scalable form management.
Always ensure your input elements have matching name attributes, and consider using this approach with form validation libraries like Formik or React Hook Form for complex forms.
