Warning: Each child in a list should have a unique "key" prop. の対応

mapやforEachなどの配列を繰り返す処理でレンダリングを行う場合には、
一意のkeyを指定する必要がある。

下記のコードをブラウザで描写すると、管理者ツールのコンソールにエラーが表示される。

import React from 'react';

const Component = () => {
  const datas = [{value: 'data1'},{value: 'data2'},{value: 'data3'},]

  return (
    <>
      {datas.map(data => {<p>{data.value}</p>})}
    </>
  );
};

export default Component;

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Component`. See https://fb.me/react-warning-keys for more information.

これは繰り返し処理によってレンダリングされている箇所に一意のkeyが指定されていないためなので、次のように修正することで、エラーは消える。

import React from 'react';

const Component = () => {
+  const datas = [{value: 'data1', id: 1},{value: 'data2', id: 2},{value: 'data3', id: 3},]

  return (
    <>
+      {datas.map(data => {<p key={data.id}>{data.value}</p>})}
    </>
  );
};

export default Component;

keyはなぜ必要なのか

keyを明示的に指定することによって、データが変更されたときにDOMのどの要素に再描画が必要かReactが認識するために必要。
ようは再描画が最適化されるらしい。

ちなみに、下記のように配列のindexをkeyに使用するのは推奨されていない。
配列の順序が変更された場合に、パフォーマンスに悪影響が発生し、コンポーネントの状態に問題が発生する場合があるみたい。

import React from 'react';

const Component = () => {
  const datas = [{value: 'data1', id: 1},{value: 'data2', id: 2},{value: 'data3', id: 3},]

  return (
    <>
      {/* これは非推奨 */}
      {datas.map((data, index) => {<p key={index}>{data.value}</p>})}
    </>
  );
};

export default Component;

詳細

reactjs.org