How to loop inside React JSX
How to do a loop in a React component
Suppose you have a React component and an items
array you want to loop over, to print all the “items” you have.
Here’s how you can do it.
In the returned JSX, add a <ul>
tag to create a list of items:
return (
<ul>
</ul>
)
Inside this list, we add a JavaScript snippet using curly brackets {}
and inside it we call items.map()
to iterate over the items.
We pass to the map()
method a callback function that is called for every item of the list.
Inside this function we return a <li>
(list item) with the value contained in the array, and with a key
prop that is set to the index of the item in the array. This is needed by React.
return (
<ul>
{items.map((value, index) => {
return <li key={index}>{value}</li>
})}
</ul>
)
You can also use the shorthand form with implicit return:
return (
<ul>
{items.map((value, index) => <li key={index}>{value}</li>}
</ul>
)
→ Get my React Beginner's Handbook
→ Read my full
React Tutorial
on The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- THE VALLEY OF CODE your web development manual
- BOOTCAMP 2024 cohort in progress, next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- SOLO LAB everything I know about running a lifestyle business as a solopreneur
- Interesting links collection
- Follow me on X