# How to loop inside React JSX

> Learn how to loop inside React JSX using the array map() method to render a list of items, returning a li element with a key prop for each value.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2018-11-06 | Updated: 2022-08-09 | Topics: [React](https://flaviocopes.com/tags/react/) | Canonical: https://flaviocopes.com/react-how-to-loop/

Suppose you have a [React](https://flaviocopes.com/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:

```js
return (
  <ul>

  </ul>
)
```

Inside this list, we add a [JavaScript](https://flaviocopes.com/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.

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

You can also use the shorthand form with implicit return:

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

Think you know how the `key` prop really works? Test yourself with my free [React key quiz](https://flaviocopes.com/tools/react-key-quiz/).