🐉
エラー解消事象
作成日:
2021/12/26
2
Warning: Each child in a list should have a unique “key” prop.
Fieldコンポーネントのレンダリングが原因となっていたのに対してエラーの該当箇所が「index.js:1」と言っていたため全然違うところにこだわってしまっていた。。。
よくよく見るとデベロッパーさんにFieldにエラーがあるよって書いてあったけれどconsole.logでちまちまとどのタイミングでエラーが出ているのか確かめてしまったので反省のためここにメモ。
調べると
「Warning: Each child in a list should have a unique “key” prop.」の回避はコンポーネントの呼び出され側ではなく呼び出し側で行う
といった記事も見られたが、公式にしたがってmapでばらす際にindexを渡して
key={index}
を入れてみたところ、あっさり解決。
fields.map((row) => {
return row.map((column,index) => {
return <div className={`dots ${column}`} key={index}></div>
})
})