Lists and Keys in React

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.