One state object, one change handler
Six fields, two handlers. The JSON under the form is the state, live. Type in any field and watch exactly one key change.
Keep a form's values in one state object, give every field a name that matches a key, and update any field with one change handler using a computed property key: { ...form, [e.target.name]: e.target.value }.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Build a booking form with name, date and seats in one state object and one handler, showing Asha booked 2 seats on 2024-01-15 below it.
Build a list of email inputs with Add and Remove buttons, stored as [{ id, email }].
Explain it without notes
How does one change handler update the right field in a state object?
What is a computed property key, and why does the form handler need it?
How do you update a nested field like address.city without mutating state?
How should you manage a list of rows that users can add and remove?
Preview
Console
Nothing logged yet.Expected console output
{ name: 'Asha', email: '', role: 'student', newsletter: true, address: { city: 'Pune', pin: '' } }