【React】「Warning: Each child in a list should have a unique "key" prop.」のエラー

実現したいこと

配列のデータをテーブルで表示させる。

バージョン等

React 17.0.0
Node.js 17.0.0

問題のコード

import * as React from "react";

export default function Notification() {
  const noticeList = [
    { content: "お知らせ1", date: "2022/10/01" },
    { content: "お知らせ2", date: "2022/10/02" },
    { content: "お知らせ3", date: "2022/10/03" },
  ];
  return (
    <table>
      <thead>
        <tr>
          <th>日付</th>
          <th>おしらせ</th>
        </tr>
      </thead>
      <tbody>
        {noticeList.map((ele, index) => (
          <tr>
            <td>{ele.date}</td>
            <td>{ele.content}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

のように記述していました。

発生したエラー(警告)

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

原因

繰り返し要素(テーブルタグやリストタグ)において、兄弟要素の中でそのアイテムが区別できるようにしてあげる必要があり、keyが指定されていないと、Reactがこのような警告を出します。
Reactチュートリアルにも解説がありますので、詳しくはこちらを参照してください。

対策

このように、繰り返し要素に、keyプロパティとして、配列のインデックスを与えれば警告は消えます。

<tr key={index}>