← React.js learning pathReact.js · Module 6 of 10
Lists and conditional rendering
Render arrays with map and show different UI for different states.
📖 Key ideas
- Render lists with items.map(item => <li key={item.id}>{item.name}</li>).
- Each list item needs a stable, unique key.
- Conditional rendering: cond && <X />, or cond ? <A /> : <B />.
- Show loading, empty and error states, not just data.
- Filter or sort before mapping.
💡 Real-life example: Keys are seat numbers in a cinema: React knows exactly who moved when the audience changes seats.
map()Turns an array into elements
keyStable identity for list items
Ternarycond ? A : B
Empty stateUI shown when there is no data