配列データを表示するときにkey属性が必要だった話

Reactを使用して配列データを出力したい場合、key属性を付与しなければならないというお話。
例えば以下のようなデータをリスト形式で画面に表示したい場合。

dataList = [
{
    "name": "taro",
    "gender": "male",
    "age": 25,
},
{
    "name": "hanako",
    "gender": "female",
    "age": 30,
}
];

JSXを用いて実装するとこのようになる。
map関数を用いて配列内のデータを出力している。

export const List = () => {
  return (
    <ul>
      {dataList.map((data, index) => (
        <li key={index}>
          {data.name} ({data.gender}, {data.age} years old)
        </li>
      ))}
    </ul>
  );
};

しかし、上記実装では問題がある。コンソールには以下のようなエラーメッセージが出力されていることが確認できる。

これを回避するためには、ユニークな値でもってkey属性を付与しなければならない。
つまり以下のようにmap関数を使って生成している要素に対して、key属性を付与することで先ほどのエラーは解消できる。

export const ListData = () => {
  return (
    <ul>
      {dataList.map((data, index) => {
        return (
          <li key={index}>
            {data.name} ({data.gender}), {data.age} years old
          </li>
        );
      })}
    </ul>
  );
};

なお、今回はindexを使用しているがベストプラクティスではないようです。
この辺りは扱うデータが持つ固有の値を用いるようにしたほうがよさそうですね。

参考

Reactのリファレンスはしっかりと日本語で書かれていて、ありがたいですね。