アジェンダ

Reactで発生する「Warning: Each child in a list should have a unique “key” prop.」という警告の解消方法について簡単にまとめます。

この警告はエラーメッセージ通りの内容ですが、備忘録として記録します。

エラーの原因と解決法

このエラーメッセージを日本語にすると次のようになります。

警告: リスト内の各子要素はユニークな "key" プロパティを持つ必要があります。

この警告が表示される主な原因として、以下の2つが考えられます。

原因:
リスト内の要素にkeyプロパティが定義されていない場合、この警告が表示されます。

解決法:
要素にkeyプロパティを定義することです。
mapメソッドを使用して要素を生成している場合は、第2引数のindexを使用してkeyプロパティを定義することで解決できます。

原因:
リスト内の要素に設定されたkeyプロパティがユニークでない(keyが重複しているということ)場合、この警告が表示されます。

解決法:
keyが重複しないようkeyプロパティを定義する。