How to Loop Inside React JSX

In this tutorial, we will learn how to perform a loop inside a React component using JSX. Let’s say we have an items array and we want to iterate over it to display all the items.

To accomplish this, follow these steps:

Start by creating a <ul> element inside the returned JSX. This will serve as the container for the list of items.
1
2
3
4
5
return (
<ul>

</ul>
)
Within the <ul> element, add a JavaScript snippet using curly brackets {} to include dynamic code. Inside this snippet, we will use the map() method to iterate over the items array.
1
2
3
4
5
6
7
return (
<ul>
{items.map((value, index) => {
return <li key={index}>{value}</li>
})}
</ul>
)
In the map() method, pass a callback function that will be called for each item in the items array. Inside this function, return a <li> element with the current item’s value, and set the key prop to the index of the item. This key prop is necessary for React to efficiently manage and update the list.
1
2
3
4
5
6
7
return (
<ul>
{items.map((value, index) => {
return <li key={index}>{value}</li>
})}
</ul>
)
Alternatively, you can use the shorthand form with implicit return:
1
2
3
4
5
return (
<ul>
{items.map((value, index) => <li key={index}>{value}</li>)}
</ul>
)

By following these steps, you can easily loop through an array in a React component using JSX. This technique is useful for dynamically rendering lists of items or any other repetitive elements.

Tags: React, JSX, loop, array, map