We can use [JavaScript's map() method](#) to create lists.
## React Example
Use the map() method to iterate through an array to generate a list of numbers from 1 to 5:
const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((numbers) =>
{numbers}); const root = ReactDOM.createRoot(document.getElementById("root")); root.render(
);
[Try it »](#)
* * *
We can refactor the above example into a component that receives an array parameter and assigns a key to each list item, otherwise a warning "a key should be provided for list items" will appear, which means you need to include a key:
## React Example
function NumberList(props){const numbers = props.numbers; const listItems = numbers.map((number) =>
{number}); return(
); }const numbers = [1, 2, 3, 4, 5]; const root = ReactDOM.createRoot(document.getElementById("root")); root.render();
[Try it »](#)
* * *
## Keys
Keys help React identify which elements have changed when some elements in the DOM are added or deleted. Therefore, you should give each element in the array a unique identifier.
const numbers = [1, 2, 3, 4, 5];const listItems = numbers.map((number) =>
{number} );
A key is best represented as a unique string that the element possesses in the list. Typically, we use the id from the data as the element's key:
const todoItems = todos.map((todo) =>
{todo.text} );
When an element does not have a definitive id, you can use its sequence number index as a key:
const todoItems = todos.map((todo, index) => // Only use this when there is no definitive id
{todo.text} );
If the list can be reordered, we do not recommend using the index for sorting, as this can cause rendering to become very slow.
* * *
## Extracting Components with Keys
A key's meaning is only relevant when compared with its siblings.
For example, if you extract a ListItem component, you should keep the key in the element in the array, not in the **
** element inside the ListItem component.
### Wrong Example
function ListItem(props) { const value = props.value; return ( // Wrong! You don't need to specify the key here: {value} );}function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => // Wrong! The key should be specified here: ); return (
);}const numbers = [1, 2, 3, 4, 5];const root = ReactDOM.createRoot(document.getElementById("root")); root.render( );
### Correct Usage of Key
## React Example
function ListItem(props){return
{props.value}; }function NumberList(props){const numbers = props.numbers; const listItems = numbers.map((number) =>); return(
); }const numbers = [1, 2, 3, 4, 5]; const root = ReactDOM.createRoot(document.getElementById("root")); root.render();
[Try it »](#)
When you call elements inside the map() method, you should always remember to add a unique key to each element.
* * *
## Keys Should Be Unique Among Siblings
The keys used in array elements should be unique among their siblings. However, they don't need to be globally unique. When we generate two different arrays, we can use the same keys.
## React Example
function Blog(props){const sidebar = (
{props.posts.map((post) =>- {post.title}
)}
); const content = props.posts.map((post) =>
{post.title}
{post.content}
); return(
{sidebar}
{content}); }const posts = [{id: 1, title: 'Hello World', content: 'Welcome to learning React!'}, {id: 2, title: 'Installation', content: 'You can install React from npm.'}]; const root = ReactDOM.createRoot(document.getElementById("root")); root.render();
[Try it »](#)
Keys are given as a hint to React, but they are not passed to your component. If your component needs to use the same value as the key, pass it as a prop:
const content = posts.map((post) => );
In the example above, the Post component can read props.id, but it cannot read props.key.
* * *
## Embedding map() in JSX
In the example above, we declared a separate listItems variable and included it in JSX:
function NumberList
YouTip