React Forms Multiple Input Fields

React Forms – Multiple Input Fields

When working with forms that have many input fields (like username, email, password, etc.), managing each input with a separate state becomes messy.
So, React allows storing multiple inputs in one single state object and updating them dynamically.

✅ Basic Example with Multiple Inputs

import { useState } from "react";

function MyForm() {
const [formData, setFormData] = useState({
username: "",
email: "",
password: ""
});

const handleChange = (event) => {
const { name, value } = event.target;

setFormData((prevState) => ({
...prevState,
[name]: value
}));
};

const handleSubmit = (event) => {
event.preventDefault();
console.log(formData);
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="username"
placeholder="Username"
value={formData.username}
onChange={handleChange}
/>

<input
type="email"
name="email"
placeholder="Email"
value={formData.email}
onChange={handleChange}
/>

<input
type="password"
name="password"
placeholder="Password"
value={formData.password}
onChange={handleChange}
/>

<button type="submit">Submit</button>
</form>
);
}

import { useState } from "react";

function MyForm() {

const [formData, setFormData] = useState({

username: "",

email: "",

password: ""

});

const handleChange = (event) => {

const { name, value } = event.target;

setFormData((prevState) => ({

...prevState,

[name]: value

}));

};

const handleSubmit = (event) => {

event.preventDefault();

console.log(formData);

};

return (

<input

type="text"

name="username"

placeholder="Username"

value={formData.username}

onChange={handleChange}

<input

type="email"

name="email"

placeholder="Email"

value={formData.email}

onChange={handleChange}

<input

type="password"

name="password"

placeholder="Password"

value={formData.password}

onChange={handleChange}

<button type="submit">Submit</button>

</form>

);

}

export default MyForm;

🔍 How It Works

Concept	Explanation
`useState({})`	Stores all input values in one object
`name=""`	Input names act as keys in state
`onChange={handleChange}`	Updates only the changed field
`...prevState`	Keeps other values unchanged when updating

✅ Dynamic Form Example (Auto Update Display)

import { useState } from "react";

function UserForm() {
const [user, setUser] = useState({
fname: "",
lname: "",
age: ""
});

const handleChange = (e) => {
const { name, value } = e.target;
setUser((prev) => ({ ...prev, [name]: value }));
};

return (
<>
<form>
<input
name="fname"
placeholder="First Name"
value={user.fname}
onChange={handleChange}
/>

<input
name="lname"
placeholder="Last Name"
value={user.lname}
onChange={handleChange}
/>

<input
name="age"
placeholder="Age"
value={user.age}
onChange={handleChange}
/>
</form>

<h3>Live Preview:</h3>
<p>Name: {user.fname} {user.lname}</p>
<p>Age: {user.age}</p>
</>
);
}

import { useState } from "react";

function UserForm() {

const [user, setUser] = useState({

fname: "",

lname: "",

age: ""

});

const handleChange = (e) => {

const { name, value } = e.target;

setUser((prev) => ({ ...prev, [name]: value }));

};

return (

<form>

<input

name="fname"

placeholder="First Name"

value={user.fname}

onChange={handleChange}

<input

name="lname"

placeholder="Last Name"

value={user.lname}

onChange={handleChange}

<input

name="age"

placeholder="Age"

value={user.age}

onChange={handleChange}

</form>

<h3>Live Preview:</h3>

<p>Name: {user.fname} {user.lname}</p>

</>

);

}

export default UserForm;

🚀 With Validation Example

🧠 Best Practices

✔ Always use a single onChange handler
✔ Use object spread syntax (...prev)
✔ Match name attribute with state keys
✔ Validate before submitting

🎯 Summary

React form handling for multiple inputs becomes easy when using:

One state object
Dynamic field updates using name
Controlled components (value bound to state)

React Forms Multiple Input Fields