🐉 エラー解消事象
作成日: 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>
                    })
                })