【React】Warning: Each child in a list should have a unique "key" prop.の解消方法

今回はReact開発で発生する警告「Warning: Each child in a list should have a unique “key” prop.」の解消方法について解説したいと思います。ユニークなキーが必要と書かれていますが、どのように解消すれば良いのでしょうか。

この記事の内容

【結論】エラーの解消方法
より具体的に
まとめ
参考

【結論】エラーの解消方法

ユニークなキーが必要とのことなので、mapメソッドのコールバック関数の第二引数（index）をキーとして付与することで解決できます。

## エラー解消前

return (
  <div>
    {items.map((item) => {
      return <Item name={item.name} size={item.size}></Item>;
    })}
  </div>
);

## エラー解消後

return (
  <div>
    {items.map((item, index) => {
      return <Item name={item.name} size={item.size} key={index}></Item>;
    })}
  </div>
);

【JavaScript】配列処理を実装できるmapメソッドについて初心者向けにまとめてみた配列処理を実装できるmapメソッドについて初心者向けに解説しています。mapメソッドって何？どのように記述するの？といったJavaScript初学者の参考になればと思います。...

より具体的に

親コンポーネントであるAppから、子コンポーネントであるItemにpropsを渡すようなコードがあるとします。

const App = () => {
  const items = [
    { name: "T-shirt", size: "M" },
    { name: "Cap", size: "Free" }
  ];
  return (
    <div>
      {items.map(item => {
        return <Item name={item.name} size={item.size}></Item>;
      })}
    </div>
  );
};

const Item = (props) => {
  return (
    <div>
      This is a {props.name}! This size is {props.size}.
    </div>
  );
};

export default App;