Loops How to render a collection of items in JSX

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.

Array Map

The most common way to loop over a collection of data in React is to use the Array map method. It takes a callback function that gets called on each element to transform the data into UI elements.

const data = [
  { id: 1, name: 'Fido ๐Ÿ•' },
  { id: 2, name: 'Snowball ๐Ÿˆ' },
  { id: 3, name: 'Murph ๐Ÿˆโ€โฌ›' },
  { id: 4, name: 'Zelda ๐Ÿˆ' },

function ListOfAnimals() {
  return (
      {data && // Only render if there's data - see 'Conditional Rendering'
        data.map(({ id, name }) => {
          return <li key={id}>{name}</li>;


Define an array of animals called data. Use a .map() to return a list of all the animals in the data array.


Ask questions via GitHub below OR chat on Slack #questions