Question

How to loop inside React JSX?

I’m trying to render a list of items inside React JSX and wondering how to implement a loop directly within the JSX. I’ve seen methods like map() being used but am unclear about the syntax and best practices. Could someone explain the correct way to loop in JSX?

Answer 1

Suppose you have a React component and an items array you want to loop over, to print all the “items” you have.

Example:

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>

)