Lists and Keys in React
React turns arrays into UI with map, yet each child needs a unique key prop or you get console warnings. Filter first, then map. The footgun: forgetting keys or failing to include stable unique IDs in your source data.
Why it exists
React applications constantly display collections of similar data such as comments, messages, or search results. Writing individual JSX elements for every item is impossible at scale. JavaScript already provides array methods to transform data, so React leans on map and filter to turn raw arrays into arrays of components without inventing new templating syntax.
The mental model
Think of map as an assembly line. Each data record enters the callback, a JSX node comes out, and the resulting array spreads directly into your component between curly braces. The key prop acts like a stable name tag so React can tell one output from another when items shift, disappear, or join the line.
How it works
You store list data in a JavaScript array, often as objects with unique id fields. Call map on the array and return JSX from the callback, passing a unique key prop to each root element. If you need a subset, call filter first to create a reduced array, then map over that result. React expects keys to be unique among siblings, and the source data should supply them.
When to use it
Use this pattern whenever you render repeated elements from dynamic data such as tables, galleries, chat histories, or navigation menus. Any time the same component shape appears multiple times with different contents, map is the right tool. Use filter when the UI must show only specific items based on categories, search terms, or flags.
When not to use it
Do not use map for a fixed, tiny set of items where each element has distinct semantics; hand-writing JSX is clearer for static buttons or one-off banners. Avoid map if your data lacks stable unique identifiers, because omitting keys triggers React console warnings.
One canonical example
A component receives an array of people objects with id, name, and profession. To show only chemists, first call people.filter with a test that checks person.profession equals chemist, then chain map to return list item elements with key set to person.id and text set to person.name. Return the result wrapped in an unordered list. Without setting key to person.id, React logs a console warning.
Interview question
When rendering a dynamic list, what problem does the key prop solve if items are later reordered or filtered?
- a.It forces React to re-render every list item whenever the parent updates
- b.It provides a stable identifier so React can distinguish individual elements as the collection changesCorrect
- c.It passes the item's unique ID to the child component as a readable prop
- d.It prevents React console warnings from appearing in development mode
Why? this is the answer
The key acts as a stable name tag so React can tell one output from another when items shift, disappear, or join the line. Preventing console warnings is only a side effect of adding keys, not their core purpose.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
- #react
- #jsx
- #lists
- #keys
- #rendering
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles