Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.
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>
)