Command Palette

Search for a command to run...

Hectal
Phase 6: Managing State
React · Exercise 3 of 5 PreviousNext
Intermediate

Keep the selection in sync: store the id

Each row has a name box (.name) and a Choose button (.choose). The line #selected shows Selected: <name>.

Right now the selected contact is stored as a copy, so renaming the selected contact leaves #selected showing the old name. Store the selected contact's id instead and find the contact during render, so #selected always shows the current name.

What Check tests

  1. It starts with Selected: Asha
  2. Renaming the selected contact updates the line
  3. Choosing Ravi shows Selected: Ravi
  4. Renaming Ravi updates the line too
  5. Renaming someone else doesn't change it

Stuck? One hint at a time

The solution unlocks after your first Check. Try first: that is where the learning happens.

Runs in your browser. Your code is saved here.

Your page

Press Run to see the page.

Console

Nothing logged yet.