Rendering Lists with map and keys

Turn an array of data into a list of elements with .map(), and learn why React needs a key on every list item.

Step 1 of 4

From an array of data to a list of UI

Almost every screen is a list: the YouTube grid of videos, Google's search results, the rows in your email inbox. You don't write each one by hand — you have an array of data and turn it into UI.

React uses plain JavaScript for this: the array .map() method, which transforms each item into a piece of JSX.

const fruits = ["Apple", "Mango", "Lime"];<ul>
  {fruits.map((fruit) => (
    <li key={fruit}>{fruit}</li>
  ))}
</ul></pre><p>You'll notice each <li> has a key prop. That's required for lists — and the next step explains why.</p>

Think of it this way: .map() is an assembly line. Raw parts (data) go in one end; each one gets stamped into the same finished product (a list item); a row of identical-shaped products comes out. You design the stamp once.

Learn more on MDN

React.dev — Rendering lists MDN — Array.prototype.map()