A dynamic list of guests
Two rows were added from code. Type a name into each row, then remove the first one: the other rows keep their own text, because they are keyed by id, not by position.
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
rows: 3