[React] Warning: Each child in a list should have a unique “key” prop.”エラーが発生した場合の解決方法

Reactは、動的なWebページを作成するためのJavaScriptライブラリであり、コンポーネントと呼ばれる小さな部品を組み合わせて構築されます。Reactを使用する際によく遭遇するエラーの1つに、「Warning: Each child in a list should have a unique “key” prop.」というエラーがあります。このエラーが発生する原因や、解決方法について解説します。

Contents

1 エラー内容
2 対応方法

エラー内容

Warning: Each child in a list should have a unique “key” prop.

対応方法

エラーメッセージ

Check the render method of `メソッド名`

の、対象メソッド内で key={＊＊} を追加することで解消する。

return (
  {items.map((item, i) => (
    <div 
      key={i}  // これを追加
    >
...