javascript / beginner
Snippet
Rendering Lists with map()
In React, we use the JavaScript map() method to loop through an array and transform each item into a JSX element, which is useful for displaying lists of data.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
function FruitList() {const fruits = ['Apple', 'Banana', 'Orange'];return (<ul>{fruits.map((fruit, index) => (<li key={index}>{fruit}</li>))}</ul>);}
react
Breakdown
1
fruits.map((fruit, index) => (...))
Iterates over the fruits array, providing the current item (fruit) and its position (index).
2
key={index}
A unique identifier that helps React efficiently update the list when items change.