React Lists & Keys

We can useJavaScript's map() methodto create lists.

---

We can refactor the above example into a component. The component receives an array parameter, and each list element is assigned a key, otherwise a warning will appeara key should be provided for list items, meaning that a key needs to be included:

---

Keys

Keys can help React identify which elements have changed when certain elements in the DOM are added or removed. Therefore, you should give each element in the array a stable identifier.

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

An element's key should ideally be a unique string that the element has in the list. Usually, we use the id from the data as the key for the element:

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

When the element does not have a stable id, you can use its index in the sequence as the key:

const todoItems = todos.map((todo, index) =>
  // 只有在没有确定的 id 时使用
  <li key={index}>
    {todo.text}
  </li>
);

If the list can be reordered, we do not recommend using the index as the key, because this can cause rendering to become very slow.

---

Extracting Components with Keys

An element's key is only meaningful when compared with its sibling nodes.

For example, if you extract a ListItem component, you should keep the key on this<ListItem />element, rather than on the <li>element inside the ListItem component.

Incorrect example

function ListItem(props) {
  const value = props.value;
  return (
    // 错啦！你不需要在这里指定key:
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    //错啦！元素的key应该在这里指定：
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

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

The correct way to use keys

When you call elements inside the map() method, you should always remember to add a unique key to each element.

---

An element's key should be unique among its sibling elements.

The keys used in array elements should be unique among their siblings. However, they do not need to be globally unique. When we generate two different arrays, we can use the same keys.

The key serves as a hint to React, but it will not be passed to your components. If your component needs the same value as the key, pass it as a prop:

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

In the above example, the Post component can read props.id, but cannot read props.key.

---

Embedding map() in JSX

In the above example, we declared a separate listItems variable and included it in 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 embedding any expression in braces, so we can use it like this in map():

Doing this can sometimes make your code clearer, but sometimes this style can also be overused. Just like in JavaScript, it is up to you to decide when to extract a variable for readability. But remember, if a map() is nested too many levels, you can extract a component.

Other extensions