Rendering Lists, Keys, and Conditional UI
Render dynamic collections with map, choose correct keys, and show or hide UI conditionally — the everyday building blocks of React interfaces.
Rendering Collections
UIs constantly display lists: products, comments, search results. In React you turn an array of data into an array of elements, usually with Array.map.
Mapping an Array
Inside JSX you call map and return one element per item. React renders the resulting array directly.
const items = ['Apple', 'Banana', 'Cherry'];
function List() {
return (
<ul>
{items.map((fruit) => <li>{fruit}</li>)}
</ul>
);
}All lessons in this course
- React Components and JSX
- State Management with Hooks
- Props and Component Communication
- Rendering Lists, Keys, and Conditional UI