Managing Multiple States

Requirement

Learn how to manage multiple pieces of state in a single component without making a mess.

Assignments (Start First)

1. Simple beginner UI task: Create a UserForm component with two separate state variables: one for firstName and one for lastName. Render two inputs and display the full name below.
2. Slightly improved version: Add a third state variable for age (a number). Add a button that increments the age by 1.
3. Practical real-world component: Build a SettingsPanel component. Use three different states to track: a volume slider (number), a "notifications enabled" toggle (boolean), and a "theme" selector (string dropdown).
4. "The Escalation": Create a RegistrationForm that uses a single state object { email: "", password: "", username: "" } instead of three separate state variables. Update the object correctly without deleting the other fields.

Lessons (Optional)

• Multiple useStates: You can call useState as many times as you need at the top of your component.
• State Objects: For related data (like form fields), you can store an object in state, but remember to use the spread operator (...prev) to copy existing fields when updating.

The Summary and Quizzes

1. Concept explanation: Complex UIs often track many things at once (text, toggles, numbers). You can split these into separate useState hooks or group them into state objects.
2. Why it works in React: React keeps track of every useState call in the exact order they are written, managing their distinct values across re-renders.
3. Challenge question: If you have const [user, setUser] = useState({ name: "Bob", age: 30 }), how do you update just the age to 31 without losing the name?