3.10. React list & Keys

3.10.1. React instance ¶

Use map() method traverses the array to generate a list of numbers 1 to 5:

constnumbers=[1,2,3,4,5];constlistItems=numbers.map((numbers)=>
<li>{numbers}</li>);ReactDOM.render(<ul>{listItems}</ul>,document.getElementById('example'));

We can reconstruct the above instance into a component that receives array parameters and assigns one for each list element key otherwise, there will be a warning a key should be provided for list items which means it needs to be included key :

functionNumberList(props){constnumbers=props.numbers;constlistItems=numbers.map((number)=>
<likey={number.toString()}>{number}</li>);return(<ul>{listItems}</ul>);}constnumbers=[1,2,3,4,5];ReactDOM.render(<NumberListnumbers={numbers}/>,document.getElementById('example'));

3.10.2. Keys ¶

Keys can help when some elements in the DOM are added or deleted React identify which elements have changed. So you should assign a definite identity to each element in the array.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

Of an element key is preferable that this element has a unique string in the list. Usually, we use the id as an element key :

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

When the element is not determined id can use his serial number index index as key :

const todoItems = todos.map((todo, index) =>
  // Only used when there is no definite ID
  <li key={index}>
    {todo.text}
  </li>
);

If the list can be reordered, we do not recommend using an index for sorting, as this can cause rendering to become slow.

3.10.3. Extract components with keys ¶

Of the element key it only makes sense when it is compared to its sibling node.

For example, if you extract a ListItem components, you should put key the one saved in the array <ListItem/> element, not on the ListItem in the component <li> on the element.

3.10.4. A false demonstration. ¶

function ListItem(props) {
  const value = props.value;
  return (
    // Wrong! You don't need to specify a key here:
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    //Wrong! The key of the element should be specified here：
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('example')
);

3.10.5. The correct use of key ¶

functionListItem(props){//By the way! There is no need to specify a key here:
return<li>{props.value}</li>;}functionNumberList(props)
{constnumbers=props.numbers;constlistItems=numbers.map((number)=>
//That's right again! The key should be specified in the context of the array
<ListItemkey={number.toString()}value={number}/>);return(<ul>{listItems}</ul>);}
constnumbers=[1,2,3,4,5];ReactDOM.render(<NumberListnumbers={numbers}/>,
document.getElementById('example'));

3.10.6. Of the element key among his brother elements, it should be unique. ¶

Used in array elements key should be unique among his brothers. However, they do not need to be globally unique. When we generate two different arrays, we can use the same key.

functionBlog(props){constsidebar=(<ul>{props.posts.map((post)=>
<likey={post.id}>{post.title}</li>)}</ul>);constcontent=props.posts.map((post)=>
<divkey={post.id}> <h3>{post.title}</h3> <p>{post.content}</p>
</div>);return(<div>{sidebar}<hr/>{content}</div>);}constposts=[{id:1,title:'Hello
World',content:'Welcome to learning
React!'},{id:2,title:'Installation',content:'You can install React from
npm.'}];ReactDOM.render(<Blogposts={posts}/>,document.getElementById('example'));

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

3.10.7. Embed in jsx map() ¶

In the above example, we declare a separate listItems variable and include it in the JSX:

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />

  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

JSX allows you to embed any expression in curly braces, so we can use the map() is used in the following ways:

functionNumberList(props){constnumbers=props.numbers;return(<ul>{numbers.map((number)=>
<ListItemkey={number.toString()}value={number}/>)}</ul>);}