使用元素的 id

這裡我們有一個傳遞給我們元件的道具的待辦事項列表。

每個待辦事項都有 text 和 id 屬性。想象一下，id 屬性來自後端資料儲存區，是一個唯一的數值：

todos = [
  {
    id: 1,
    text: 'value 1'
  },
  {
    id: 2,
    text: 'value 2'
  },
  {
    id: 3,
    text: 'value 3'
  },
  {
    id: 4,
    text: 'value 4'
  },
];

我們將每個迭代列表元素的 key 屬性設定為 todo-${todo.id}，以便 react 可以在內部識別它：

render() {
  const { todos } = this.props;
  return (
    <ul>
      { todos.map((todo) =>
        <li key={ `todo-${todo.id}` }>
          { todo.text }
        </li>
      }
    </ul>
  );
}