Connecting
Learn/L5 · React

Lists

Render a list with .map() and a stable key.

Difficulty 2/5
Short

Plain English

Render a list with .map() and a stable key. Picture it like this: Printing one row per row in a spreadsheet. In the apps you ship (Agentify, wedding portals, CRM), you will bump into this on almost every screen — name it clearly when you prompt your coding agent.

Analogy

Printing one row per row in a spreadsheet.

Go deeper

Render a list with .map() and a stable key.

Common mistakes

  • Letting the AI rename this concept three different ways in one PR.
  • Building UI before you can say what is stored and who can change it.

AI-agent trap

Agents may invent jargon here. Ask them to explain the concept in plain English first, then map it to your schema and one real screen.

Summary

Render a list with .map() and a stable key. Printing one row per row in a spreadsheet. Ask yourself: where does this live in the database, which function changes it, and which screen shows it?

Confidence: