React(Next.js)でWarning: Each child in a list should have a unique "key" prop.の原因と解決法
公開日:
目次
Warning: Each child in a list should have a unique key prop.
Next.js(React)でWarning: Each child in a list should have a unique "key" prop.が出る場合があります。
この記事では、 Warning: Each child in a list should have a unique "key" prop.の原因と解決法を紹介します。
Warning: Each child in a list should have a unique key prop.の原因
Warning: Each child in a list should have a unique "key" prop.は、Reactの仕様によるものです。
Reactでは、リストの各要素にkeyを設定する必要があります。keyを設定しないと、Warning: Each child in a list should have a unique "key" prop.が出ます。
この場合、リストとは配列のことで、配列の各要素にkeyを設定する必要があります。
例えば下記のようなコードでは、Warning: Each child in a list should have a unique "key" prop.が出ます。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
const list = ['a', 'b', 'c'];
return (
<ul>
{list.map((item) => (
<li>{item}</li>
))}
</ul>
);
};
Warning: Each child in a list should have a unique key prop.の解決法
Warning: Each child in a list should have a unique "key" prop.を解決するには、keyを設定する必要があります。
keyを設定するには、下記のようにkeyを設定します。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
const list = ['a', 'b', 'c'];
return (
<ul>
{list.map((item) => (
- <li>{item}</li>
+ <li key={item}>{item}</li>
))}
</ul>
);
};
要するにmap等を使って配列を展開するときに、key={item}とかをつけるのが正しい書き方みたいです。