← 一覧へ
コードの書き間違い出る場所:ブラウザの画面・開発者ツールよく出る

一覧に目印(key)がない(React)

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

ひとことで言うと

注意のお知らせで、「一覧の1つ1つに、見分けるための目印(key)を付けてください」という意味です。動きますが、表示がずれる原因になります。

よくある原因

  1. .map() で並べた要素に key を付けていない
  2. 同じ key がいくつもある

自分で確かめること

たいていは、こうすると直ります

items.map((item) => <li key={item.id}>…) のように、1つ1つで違う値(id など)を key にします。

AIへの伝え方

下の文をコピーして、ChatGPT・Claude・Cursor などに貼り付けてください。トップで貼り付けたエラー文があれば、自動でそれに入れかわります。

次のエラーが出て困っています。プログラミング初心者にもわかるように、原因と直し方を教えてください。必要なら、直したコードも全部見せてください。

【エラー】
Warning: Each child in a list should have a unique "key" prop.

【やったこと】
(ここに、エラーが出る前にしたことを書く。例:npm run dev を実行した)

【参考】
このエラーは「一覧に目印(key)がない(React)」というもので、よくある原因は次のとおりです。
・`.map()` で並べた要素に `key` を付けていない
・同じ `key` がいくつもある

どれに当てはまるかを確かめる方法も教えてください。