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}とかをつけるのが正しい書き方みたいです。