【React】mapメソッドのエラー解決法

2022.03.262021.12.02

エラー文はこちら

Warning: Encountered two children with the same key, .$.$[object Object]. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

以下の部分が原因でエラーが発生していた。

{list.map((index, data) =>{
　　return <MenuItem key={index} value={data.id}>{data.name}</MenuItem>;
})}

解決法

{list.map((data, index) =>{
　　return <MenuItem key={index} value={data.id}>{data.name}</MenuItem>;
})}

やったことは、dataとindexの順番を入れ替えたのみ。

一意のindex番号は、第二引数で渡さないといけないようです！