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

Precondition

  • Reactでの開発時に発生

Fact

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

Error log or Error Massage

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

Cause

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

Method

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

items.map((item, index) => {
  return <ItemCard 
           key={index}
           item={item}
         />}
在宅専門のフリーランスエンジニアをしています。 得意言語はVBAです。Next.jsとTypescriptを鍛錬中。
Area to place ads.
Area to place ads.
Comments
There are no comments on this article yet.

Environment Library tools

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