Call map() on the array and return a JSX element for each item. Give each element a key prop that is unique among its siblings.
function TodoList({ todos }) {
return (
<ul>
{todos.map(todo => (
<li key={todo.id}>
{todo.text}
</li>
))}
</ul>
);
}
The key tells React which item each element belongs to. When the list changes, React uses the keys to see which items were added, removed or changed. It then updates only those and keeps each item's state, which improves performance during re-renders.
Use a stable ID from your data as the key. An array index breaks when items are inserted, removed or reordered, and a random key makes React recreate every item on each render.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Saved in this browser - sign in to keep your review list.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Keep going - a few more words and AI can grade it.
Interview lens
How interviewers actually use this question
Likely follow-ups
Why is the array index a bad key, and when is it fine to use one?Show the bug. State sticks to position, so after an insert or reorder an item shows the wrong values. Index is fine for a static list that never reorders or filters.
Your data has no ID field. Where should the key come from?Assign an ID once when the item is created or loaded, or build one from fields that are unique together. Never make it up during render.
Each item needs to render two sibling elements with no wrapper. How do you key that?Use <Fragment key={id}> around the pair. The short <></> syntax can't take a key.
How can you use key on purpose to reset a component's state?Changing a component's key makes React unmount the old one and mount a new one with fresh state, for example key={userId} on a profile form.
What you can say
You render a list by calling map() on the array and returning a JSX element for each item, and each element gets a key prop that's unique among its siblings.
For a todo list, I'd map over todos inside a ul and return an li for each one, with the key set to todo.id.
The key tells React which item each element belongs to, so when the list changes it can see what was added, removed or changed.
React then updates only those items and keeps each item's state, which saves work on re-renders.
I'd use a stable ID from the data, because an index breaks when items are inserted, removed or reordered.
A random key is worse, since React would recreate every item on every render.
Weak answers to avoid
Uses the array index as the key by defaultIndex keys tie state to position, so after an insert or reorder an input can show another item's text. Say you use a stable ID from the data.
Generates keys with Math.random() during renderA new key on every render makes React throw away and recreate every item, so state and focus are lost. Keys must stay the same between renders.
Says keys only exist to silence a console warningThat misses the point. Explain that keys let React match old and new items, so it updates only what changed and keeps each item's state.
Puts the key on an inner element, not the mapped oneReact reads the key on the element returned from map(). A key on a nested child doesn't identify the list item, and the warning stays.
Interview lens
Likely follow-ups, what you can say, and the weak answers to avoid.
