Registration Form in React JS Handling multiple field using useState 2025
Registration Form in React JS
Handling Multiple Fields using useState (2025)
In React, we can handle multiple input fields using a single state object with the useState hook. Below is an example of a registration form handling name, email, and password.
import React, { useState } from 'react';
function RegistrationForm() {
const [formData, setFormData] = useState({
name: '',
email: '',
password: ''
});
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};
const handleSubmit = (e) => {
e.preventDefault();
console.log('Form submitted:', formData);
};
return (
);
}
export default RegistrationForm;
This method is scalable and helps you manage form inputs in an organized way. You can also handle checkboxes, radio buttons, and select dropdowns using a similar pattern.