Expain Update form input values into React state dynamically (useState in Depth (Complete Tutorial))

 It works for multiple inputs using one function.

---

📌 Your State

const [user, setUser] = useState({
  first_name: '',
  last_name: '',
  email: ''
});

👉 This state holds all form values in one object.

---

📌 The handleChange Function

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

  setUser({
    ...user,
    [name]: value
  });
};

Now let’s break it down 👇

---

🔍 Step 1: Event Trigger

When a user types in an input field:

<input name="first_name" onChange={handleChange} />

👉 React automatically passes an event object to

handleChange

.

---

🔍 Step 2: event.target

event.target

This refers to the input element that was changed.

Example:

event.target.name   // "first_name"
event.target.value  // "Lakhan"

---

🔍 Step 3: Destructuring

const { name, value } = event.target;

This is shorthand for:

const name = event.target.name;
const value = event.target.value;

✔ Cleaner code
✔ Easier to read

---

🔍 Step 4: Updating State Correctly

setUser({
  ...user,
  [name]: value
});

What does this mean?

1️⃣

...user

(Spread Operator)

...user

Copies existing values:

{
  first_name: 'Lakhan',
  last_name: '',
  email: ''
}

👉 Without this, other fields would be lost.

---

2️⃣

[name]: value

(Dynamic Key)

[name]: value

This means:

first_name: "Lakhan"

OR

email: "test@gmail.com"

Based on which input triggered the event.

---

🎯 Final Result Example

Typing in First Name Input

name = "first_name"
value = "Lakhan"

State becomes:

{
  first_name: "Lakhan",
  last_name: "",
  email: ""
}

---

Typing in Email Input

name = "email"
value = "lakhan@gmail.com"

State becomes:

{
  first_name: "Lakhan",
  last_name: "",
  email: "lakhan@gmail.com"
}

---

🧪 Complete Working Example

<input type="text" 
name="first_name" 
value={user.first_name} 
onChange={handleChange
/>

<input type="text" name="last_name" 
value={user.last_name} 
onChange={handleChange} />

<inputtype="email" name="email" value={user.email} onChange={handleChange} />