Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026
The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.
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>
)