Blog / Quick-fixes

How to loop inside React JSX

How to loop inside React JSX

In this post find the quick and simple solution for how to loop inside React JSX - Quick Fix Series!

Will MaygerWill Mayger
July 30, 2021
Article

In this quick post we will be covering how to loop inside React JSX so you can solve this issue quickly and without having to look any further!

As with all my Quick Fix Series of posts, you will first find the problem described and then the solution just below.

Let’s get stuck in!

The Problem - Why should you loop inside React JSX?

You might want to loop inside React JSX to display a list of components based off of an array of data.

In other words you have a set of data in an array, (or maybe an array of react components), and you need to display that within your React JSX.

Here is an example of this issue:

const data = ["Apple", "Banana", "Pear", "Orange"]
return (
  <ul>
    <li>{data[0]}</li>
    <li>{data[1]}</li>
  </ul>
)

As you can see we want to display our data without having to write it all out by hand and instead use a loop inside React JSX to be able to do the hard work for us.

I have have full post on how you can do this with an array of data here or an array of components here.

The solution - How to loop inside React JSX

To solve the issue of how to loop inside React JSX, it is important to understand we need to return whatever we need to the JSX.

This means that if we want to display a list of components, we need to return a list of components to the React JSX.

This means if we have an array of data, instead of trying to loop inside our React JSX, we just need to transform it into an array of components instead which we can pass directly into the React JSX.

The easiest way to do this is by making use of the Array.prototype.map function in order to transform an array of data into an array of components.

Here is how we can loop inside React JSX to create our finished JSX:

const data = ["Apple", "Banana", "Pear", "Orange"]
return (
  <ul>
    {data.map(item => (
      <li key={item}>{item}</li>
    ))}
  </ul>
)

The reason this works is because Array.prototype.map returns a new array by taking each item and passing it into the callback we provide it, once it runs the callback it takes the return value and adds it into a new array.

Once all the items have finished, it then returns us the entire new array.

One last note, you must provide a unique key to each component you create via map so that React can keep track of it between renders (Find out more about it here).

Summary

There we have the quick fix to how to loop inside React JSX, if you want more like this be sure to check out some of my other posts!

Foxi - Budget Planner & Tracker

Foxi

Budget Planner & Tracker

More money in your pocket by the end of the month.

Free to use and no account needed.

Get started now.

Get the app

Some graphics used on this post were made using icons from flaticon.

Latest Posts

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Become an expert in ReactJS, TypeScript, and JavaScript.

Here you will find my personal recomendations to you, for full disclosure I earn a small commission from some of these links, but I only recommend what I trust and personally use.

Good things are coming, don't miss out!

Good things are coming, don't miss out!

Follow me on Twitter to stay up to date and learn frontend, React, JavaScript, and TypeScript tips and tricks!

Are you a novice, intermediate or expert react engineer?

Find out here by taking my fun, interactive, quick quiz which takes approximately 1 - 3 minutes. How well will you will do?

Foxi - Budget Planner & Tracker

Foxi

Budget Planner & Tracker

More money in your pocket by the end of the month.

Free to use and no account needed.

Get started now.

Get the app