Rendering lists
In React you often map over an array to render a list of components. Each item needs a unique key (usually an id) so React can update efficiently. Here we simulate with a simple loop and console output.
Appy Says…
Every social feed, search result, leaderboard, and playlist UI is a list of repeated components. React makes this elegant with .map() — transform an array of data into an array of JSX in one line.
What is List Rendering in React?
React renders lists by mapping over an array of data and returning a JSX element for each item. Every rendered list item needs a unique key prop so React can track changes efficiently.
- •Pattern:
{items.map(item => <Component key={item.id} {...item} />)} - •
keymust be unique among siblings — use a stable ID, not the array index - •Keys help React detect additions, removals, and reorders efficiently
- •Inline in JSX: wrap in
{ } - •Can return fragments:
{items.map(i => <><dt>{i.term}</dt><dd>{i.def}</dd></>)}
Think of it like a Roblox leaderboard
A Roblox leaderboard takes a sorted array of players and renders one row per player. React list rendering does exactly this: give it an array, define how one item looks, and it stamps out a row for every item automatically.
How It Works
- •1. Have an array:
const songs = [{id:1, title:'...'}, ...] - •2. Map inside JSX:
{songs.map(song => <SongRow key={song.id} song={song} />)} - •3. React renders each element in order
- •4. When the array changes, React uses keys to update only what changed
- •5. Filter before map:
{songs.filter(s => s.liked).map(...)}
Real-World Examples
- •Spotify tracklist:
{tracks.map(t => <TrackRow key={t.id} track={t} />)} - •TikTok feed:
{posts.map(p => <VideoPost key={p.id} post={p} />)} - •Search results:
{results.filter(r => r.score > 0.5).map(r => <Result key={r.id} {...r} />)} - •Navigation links:
{navItems.map(item => <NavLink key={item.path} {...item} />)}
Key Facts
- •Using array index as key (
key={i}) works only for static lists — causes bugs when items are added/removed/reordered - •React reconciliation uses keys to diff the virtual DOM efficiently
- •
keyis not a prop — the child component can't accessprops.key - •Rendering 10,000+ items? Use a virtualised list library (react-window, TanStack Virtual)
Watch Out!
Never use array index as the key when the list can change order, be filtered, or have items added/removed. React will reuse the wrong DOM nodes, causing visual bugs and incorrect state. Always use a stable, unique ID from your data.
Remember
array.map(item => <Component key={item.id} ... />). Key must be unique and stable — use a real ID, not the loop index.
What You Learned
- •List rendering: .map() turns data arrays into JSX arrays
- •Every list item needs a unique, stable key prop for efficient reconciliation
- •Unlocks: feeds, search results, playlists, leaderboards — any data-driven list UI
Key Facts
- →Using array index as key (
key={i}) works only for static lists — causes bugs when items are added/removed/reordered - →React reconciliation uses keys to diff the virtual DOM efficiently
- →
keyis not a prop — the child component can't accessprops.key - →Rendering 10,000+ items? Use a virtualised list library (react-window, TanStack Virtual)
Real-World Examples
Remember
array.map(item => <Component key={item.id} ... />). Key must be unique and stable — use a real ID, not the loop index.
Quick Quiz
Why do we need keys in a list?