Fundamentalsbeginner
Rendering Lists and the map() Pattern
Learn the standard pattern for turning arrays of data into arrays of elements in JSX.
Since JSX has no built-in loop syntax, rendering a collection of items means transforming an array of data into an array of elements using ordinary JavaScript array methods — almost always .map(). The callback passed to .map() returns a JSX element for each item, and the resulting array of elements is embedded directly into the surrounding JSX with curly braces.
It's like taking a list of names and running each one through a label printer — the `.map()` step is the pass through the printer, producing one printed label (element) per name, and React just needs a serial number (key) on each label to track it in the future.
Key Concepts
1
This pattern composes naturally with .filter() for conditionally excluding items and .sort() for ordering, since these are all just standard array operations chained before the final .map(). It keeps rendering logic declarative: you describe the transformation from data to UI rather than imperatively pushing DOM nodes.
.filter().sort().map()
2
Every element produced in the array needs a unique key prop (see the Keys and List Rendering topic) so React can track identity across renders. Beyond that, list rendering is otherwise identical to rendering a single element — the mapped elements can be full components, not just plain tags.
key
3
Interviewers sometimes present a broken list-rendering snippet (missing keys, mutating state arrays with .push() instead of returning new arrays) and ask candidates to fix it, testing both JSX fluency and understanding of immutable state updates.
.push()