React User Form (State & Controlled Components)

What i Learned From This Code

---

1.Multiple States

Using multiple useState hooks to manage different form fields:

useState("") // name

useState("") // email

useState(0) // age

useState(false) // checkbox

Each input has its own state Helps manage data independently

---

2. Controlled Components

React controls form inputs using:

value={name} onChange={(e) => setName(e.target.value)}

Input value comes from state Any change updates the state

✔ This is called a controlled component

---

3. Handling Input Changes

🔹 Text Input onChange={(e) => setName(e.target.value)}

🔹 Removing Numbers from Name onChange={(e) => setName(e.target.value.replace(/[0-9]/g, ""))}

🔹 Number Input onChange={(e) => setAge(e.target.value)}

🔹 Checkbox Input checked={isSubscribe} onChange={(e) => setSubscribe(e.target.checked)}

Checkbox uses checked, not value

---

Quick Revision Notes

useState → used to store and update data Each input should have: value (state) onChange (update state)

---