← flaviocopes.com

How to loop inside React JSX

Updated Aug 09 2022

Psssst! The 2023 WEB DEVELOPMENT BOOTCAMP is starting on FEBRUARY 01, 2023! SIGNUPS ARE NOW OPEN to this 10-weeks cohort course. Learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much more! ✨

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>
)


I write books for developers 👇🏼

© 2023 Flavio Copes Flavio Copes made in Italy 🇮🇹 using Notion to Site Notion to Site