React
反応の鍵

前書き

備考

要素のidを使う

ここでは、コンポーネントの小道具に渡されるToDo項目のリストがあります。

各ToDo項目には、textプロパティとidプロパティがあります。 idプロパティがバックエンドデータストアから来ており、一意の数値であるとします。

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

反応が内部的にそれを識別できるように、各反復リスト要素のキー属性をtodo-${todo.id}設定しました：

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

配列インデックスの使用

一意のデータベースIDを持っていない場合は、次のように配列の数値インデックスを使用することもできます。

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