【React】Warning: Each child in a list should have a unique "key"
エラーになったコード
// jsx部分
return (
// 省略
{values.map((value, index) => {
return (
<>
<ChildComponent value={value} key={index} />
</>
)
})}
// 省略
)
エラーが出なかったコード
// jsx部分
return (
// 省略
{values.map((value, index) => {
return <ChildComponent value={value} key={index} />
})}
// 省略
)
原因など
結局公式記載の通りに書いていなかったことが原因。
ちょっとわかりにくいんですが、
一番外側？の部分にkeyをつけないといけない。
しかし <ChildComponent /> を <></> で囲ってしまっていた。
ReactはRoRなんかと比べるとトレシュー記事少ないが、
基本、入門記事読んでわからない＝おかしな事してるって嗅覚になってれば、
大体問題なさそう。
参考サイト
Author And Source
この問題について(【React】Warning: Each child in a list should have a unique "key"), 我々は、より多くの情報をここで見つけました https://zenn.dev/dev63/articles/9bcd35f861efec著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol