javascript / beginner
Snippet
Rendering Lists using .map()
The .map() method is the standard way to transform an array of data into an array of JSX elements in React.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
function UserList() {const users = ['Alice', 'Bob', 'Charlie'];return (<ul>{users.map((user) => (<li key={user}>{user}</li>))}</ul>);}
react
Breakdown
1
users.map((user) => (...))
Iterates through each item in the 'users' array and returns a new <li> element for each.
2
key={user}
A special attribute (key) that helps React identify which items have changed, been added, or removed.