Skip to content

How to loop inside React JSX

The Valley of Code

Your Web Development Manual

How to do a loop in a React component

Suppose you have a React component and an items array you want to loop over, to print all the โ€œitemsโ€ you have.

Hereโ€™s how you can do it.

In the returned JSX, add a <ul> tag to create a list of items:

return (
  <ul>

  </ul>
)

Inside this list, we add a JavaScript snippet using curly brackets {} and inside it we call items.map() to iterate over the items.

We pass to the map() method a callback function that is called for every item of the list.

Inside this function we return a <li> (list item) with the value contained in the array, and with a key prop that is set to the index of the item in the array. This is needed by React.

return (
  <ul>
    {items.map((value, index) => {
      return <li key={index}>{value}</li>
    })}
  </ul>
)

You can also use the shorthand form with implicit return:

return (
  <ul>
    {items.map((value, index) => <li key={index}>{value}</li>}
  </ul>
)
โ†’ Get my React Beginner's Handbook
โ†’ Read my full React Tutorial on The Valley of Code
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ free coding BOOKS, download them here
  • SOLOPRENEUR LAND the missing MBA for wannabe solopreneurs craving a life with more freedom, control, fulfillment and purpose (summer 2024)