5 hands-on exercises and 5 find-the-bug challenges for the Keys Explained lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.
Use each item's id as its key.
When there is no id, use a value that is unique in the list.
The key belongs on the element returned by map.
Pass the key to the component, and the data as separate props.
Reverse the list on click and show the first name.
The key uses a field that is the same for every item.
reverse mutates in place, so React sees the same array.
Ready to write the code?
The editor, the automatic checks and the worked solutions open up with an account.
Open the workspaceThe map shows the index it was keying by rather than the person.
A component cannot read key; pass the id separately if it needs it.
The map runs over the wrong array, so the wrong names show.