Next.jsでMissing "key" prop for element in iteratorのエラー

Missing "key" prop for element in iteratorのエラー

export default function App()) {
  const blogs = [
    { id: 1, title: "タイトル1" },
    { id: 2, title: "タイトル1" }
  ];

  return (
    {blogs.map((blog) => (
      <p>{blog.title}</p>
    ))}
  );
}

上記コードで問題なく画面表示されますが、タイトル通りのエラーで怒られます。
keyに関する説明は、公式ドキュメントに記載がありました。

React 公式ドキュメント

キーは、どの項目が変更、追加、または削除されたかを React が識別するのに役立ちます。要素に安定したアイデンティティを与えるために、配列内の要素にキーを与える必要があります。

解消方法

keyにblog.idを入れるとエラーは解消されました。

一意のkeyがない場合、最終手段としてindexを入れるようにすれば良いみたいです。

export default function App()) {
  const blogs = [
    { id: 1, title: "タイトル1" },
    { id: 2, title: "タイトル1" }
  ];

  return (
    {blogs.map((blog) => (
      <p key={blog.id}>{blog.title}</p>
    ))}
  );
}