logo image

Reactでkeyが必要という警告文の対応(Warning: Each child in a list should have a unique "key" prop.)

Icon representing a data.
2021-12-23
Icon show updated_at
2021-12-23
1
Twitter icon.
React
Nextjs
Mac

前提条件

  • Reactでの開発時に発生

現象

開発時にブラウザのコンソールログに以下のようなエラーログが発生した。

エラーログ・エラーメッセージ

Warning: Each child in a list should have a unique "key" prop. Check the render method of

原因

ループをしながらコンポーネントを表示させるときは、ユニークなキーを表示させなければならない。

対応

ループで回すときは、indexを使用してコンポーネントにキーを付与する。

items.map((item, index) => {
  return <ItemCard 
           key={index}
           item={item}
         />}
在宅専門のフリーランスエンジニアをしています。 得意言語はVBAです。Next.jsとTypescriptを鍛錬中。
Area to place ads.
Area to place ads.
Comments
この記事にコメントはまだありません。

開発環境 ライブラリ ツール

React
Nextjs
Mac
在宅専門のフリーランスエンジニアをしています。 得意言語はVBAです。Next.jsとTypescriptを鍛錬中。