Aabha · Frontend foundations

React with TypeScript · Harbor Together

Practice 05 · Identity and lifetime

A. Follow a saved ID

Use checkpoint 05 to save Garden morning, hide it with filters, and show it again. Explain why its saved status survives even if its card unmounts. Inspect the state representation and name the source of its title after it reappears.

B. Repair unstable identity

A list uses key={index}; each card owns an expanded boolean. Explain the risk when the first event is removed. Then explain why key={Math.random()} is not a repair. Make a copied list use stable record IDs at the immediate mapped element and verify sorting does not attach expansion to another event.

C. Transfer

Add a saved-count summary and a clear-saved button to a copied checkpoint. Store only IDs. The count must update after a toggle, after clearing, and while filters hide saved cards. Explain whether you count all saved IDs or only saved records in the current dataset, and make the wording match your policy. Do not persist anything yet.

Completion evidence: identity explanation, list-key repair, immutable clear operation and three count cases. Separate solutions. Then attempt assessment 01.