# Loop Inside JSX Using For Loops or the map() Method

> Use a traditional for loop to build an array of JSX elements outside the return block, or call map() directly inside JSX to render a list from an array

**URL:** https://sentry.io/answers/react-for-loops/

---

## The Problem

You have a set of elements, and you'd like to loop over them to generate a JSX partial.

In templating languages, you can write a `for` loop directly inside the template. For example, you can use the following code to loop over a list in [Jinja](https://jinja.palletsprojects.com/en/3.1.x/):

```jinja
{% for i in range(11) %}
    <li>{{ i }}</li>
{% endfor %}
```

How can you do the same thing using JSX?

## The Solution

Two ways you can loop inside JSX are using traditional loops or using the `map()` method.

### Using Traditional Loops

If you have a set of elements, you can use normal JavaScript `for`, `for of`, and `for in` loops outside the `return` block.

Inside the `return` block, you can use the resulting array.

You can loop over an array and create JSX partials like so:

```jsx
import React from "react";

function App() {
  const seasons = ["Spring", "Summer", "Autumn", "Winter"];

  let seasonsList = [];

  seasons.forEach((season, index) => {
    seasonsList.push(<li key={index}>{season}</li>);
  });

  return (
    <div>
      <h2>Seasons of the year</h2>
      <ul>{seasonsList}</ul>
    </div>
  );
}

export default App;
```

### Using the `map()` Method

You can use the [`map()` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) on an array to loop through the elements and create components, or generate JSX, inside the `return` block.

```jsx
import React from "react";

function App() {
  const seasons = ["Spring", "Summer", "Autumn", "Winter"];

  return (
    <div>
      <h2>Seasons of the year</h2>
      <ul>
        {seasons.map((season) => (
          <li key={season.id}>{season}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;
```

Many developers prefer using `map()` to loop over arrays.

## Further Reading

If you're looking to get a deeper understanding of how React application monitoring works, take a look at the following articles:

- [React Debugging Hub](https://sentry.io/answers/react/)
- [How to Install the Sentry React SDK in 60 Seconds](https://www.youtube.com/watch?v=14ZyechwF6o)
- [React Native with Robin Heinze](https://syntax.fm/show/773/react-native-with-robin-heinze)
- [Sentry for React](https://docs.sentry.io/platforms/javascript/guides/react/)
- [React Error and Performance Monitoring](https://sentry.io/for/react/)
- [Why the jQuery Creator Uses React and Typescript - John Resig](https://syntax.fm/show/800/why-the-jquery-creator-uses-react-and-typescript-john-resig)

---

*Source: [sentry.io/answers/react-for-loops/](https://sentry.io/answers/react-for-loops/)*