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:
{% for i in range(11) %} <li>{{ i }}</li> {% endfor %}
How can you do the same thing using JSX?
Two ways you can loop inside JSX are using traditional loops or using the map()
method.
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:
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;
map()
MethodYou can use the map()
method on an array to loop through the elements and create components, or generate JSX, inside the return
block.
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.
Get actionable, code-level insights to resolve React performance bottlenecks and errors.
Create a free Sentry account
Create a React project and note your DSN
Grab the Sentry React SDK
npm install @sentry/react
import React from "react"; import ReactDOM from "react-dom"; import * as Sentry from "@sentry/react"; import App from "./App"; Sentry.init({ dsn: "https://<key>@sentry.io/<project>" }); ReactDOM.render(<App />, document.getElementById("root"));
Check our documentation for the latest instructions.
Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.