How to loop inside React JSX

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!