Lists & Keys; Conditional Rendering
Render arrays with map(), choose stable keys, handle empty/loading states, and apply common conditional patterns.
Overview
Goal: Render arrays safely and clearly with keys, and use simple conditional patterns for empty/loading UI.
map() to render arrays
Use array.map() to turn data into elements; each direct child in a list needs a key prop for stable reconciliation.
All lessons in this course
- JSX Rules: Expressions, Attributes, Fragments
- Lists & Keys; Conditional Rendering
- Styling Options: CSS Modules, Inline Styles, Class Helpers