javascript / beginner
Snippet
Mapping Lists in React
To render a list of items, we use the JavaScript .map() function. In React, each list element needs a unique 'key' prop to help identify which items have changed.
snippet.js
1
2
const items = ['Apple', 'Banana', 'Cherry'];const listItems = items.map((item) => <li key={item}>{item}</li>);
react
Breakdown
1
items.map((item) => ...)
Iterates through the 'items' array and returns a new array of JSX elements.
2
key={item}
A special attribute required by React to track list items efficiently.