List Rendering Rendering Lists
Last updated: 2026-11-02
List Rendering Rendering Lists
React renders lists by mapping an array through map() into a set of JSX elements: prepare an array of data, return JSX with a unique key for every item, and you can render any collection as a list that updates automatically when the data changes. The key is what lets React match the new items with the old ones, so it is never optional.
| Group | Rendering & State |
|---|---|
| Kind | Pattern |
| Since | Earliest React versions |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
<ul>
{todos.map((todo) => (
<li key={todo.id}>{todo.text}</li> // map: array → array of JSX
))}
</ul>Returns：No return value — a coding convention and mental model.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
The heading shows the number of tasks and the list below shows three todos; clicking "Add task" adds "Task 4", "Task 5" and so on in real time, and the count stays in sync.💡 Key Points
⚠️ Warning Every element returned by map needs a stable, unique key, otherwise React warns in the console and updates can end up misaligned.
💡 Tip When the JSX of a list item gets complex, extract it into its own child component and keep the map body down to <TodoItem key={t.id} todo={t} />.
ℹ️ Info Besides map, methods that return new arrays such as filter and slice are often combined with list rendering.
🏷️ More Rendering & State
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q How do I render a list in React?
A Use the array's map method to turn every item into a JSX element with a key; the returned array of JSX renders as a list in order.
Q Why does a list rendered with map need keys?
A The key tells React the identity of each item, so the diff can tell what to add, move or delete; without it updates tend to misalign and performance suffers.
Q Where do I put the key when a list item is a component?
A On the outermost list element of the component call, <TodoItem key={t.id} />, not on the first element inside the component.
