How Do You Render Lists in React?
Learn how to render lists in React using Array.map(), why the key prop matters, common mistakes, code examples and interview questions with clear answers.
Expected Interview Answer
You render lists in React by calling Array.prototype.map() over your data to transform each item into a React element, and giving every returned element a stable, unique key prop.
React does not have a special loop syntax in JSX, so you use plain JavaScript expressions inside curly braces. map() returns an array of elements that React renders in order. The key prop lets React match elements between renders so it can update, reorder, or remove only what changed instead of re-creating the whole list. Keys should be stable IDs from your data, not the array index, whenever items can be added, removed, or reordered.
- Turns any array of data into UI declaratively
- Keys enable efficient, minimal DOM updates
- Uses standard JavaScript, no new template syntax
- Preserves component state across reorders when keys are stable
- Easy to compose with filter and sort before mapping
AI Mentor Explanation
Rendering a list is like a scorer writing one scoreboard row per batter from the team sheet: the team sheet is your data array, map() is the scorer walking down it, and each jersey number is the key so a substitution updates only that one row, not the whole board.
Step-by-Step Explanation
Step 1
Start with an array
Have your data as a JavaScript array, for example a list of user objects fetched from an API.
Step 2
Call map inside JSX
Inside curly braces, call array.map() and return a JSX element for each item.
Step 3
Add a stable key
Give each returned element a key prop set to a unique, stable ID from the item.
Step 4
Render item data
Use the item's fields inside the element to display its content.
Step 5
Filter or sort first if needed
Chain filter or sort before map to control which items appear and in what order.
What Interviewer Expects
- Uses Array.prototype.map to produce elements
- Knows the key prop and why it is required
- Understands why array index is a poor key
- Can explain reconciliation at a basic level
- Handles empty lists gracefully
Common Mistakes
- Using the array index as key when items reorder or change
- Forgetting the key prop entirely, causing console warnings
- Putting the key on a child element instead of the outermost returned element
- Mutating the array in place instead of returning new elements
- Using forEach instead of map, which returns nothing to render
Best Answer (HR Friendly)
“In React you turn a list of data into a list on screen by looping over the array with map and creating one small piece of UI for each item. You also give each item a unique key so React can tell them apart and update the screen quickly.”
Code Example
function UserList({ users }) {
if (users.length === 0) {
return <p>No users found.</p>
}
return (
<ul>
{users.map((user) => (
<li key={user.id}>
{user.name} - {user.email}
</li>
))}
</ul>
)
}Follow-up Questions
- Why should you avoid using the array index as a key?
- What warning does React show when keys are missing?
- How does the key prop help React's reconciliation?
- How would you render a list conditionally when it is empty?
- Can two sibling elements share the same key?
MCQ Practice
1. Which array method is most commonly used to render a list in JSX?
map returns a new array of React elements, which JSX can render directly; forEach returns undefined.
2. What is the purpose of the key prop when rendering lists?
Keys give elements a stable identity so React can efficiently update, add, or remove only the items that changed.
3. Why is using the array index as a key discouraged?
When items reorder or are removed, index-based keys shift, causing React to mismatch elements and lose or misapply state.
Flash Cards
How do you render an array in React? — Call array.map() inside JSX and return one element per item.
What is the key prop? — A unique, stable identifier that lets React track list items across renders.
Why not use the index as key? — Indexes change on reorder or removal, causing incorrect updates and lost component state.
What does map return? — A new array of React elements, which React renders in order.