Error: Objects are not valid as a React child の解決方法

概要

Reactを勉強中、map関数で少しつまずきました。
初歩の初歩ですが、解決方法を記載します。

エラー内容

Objects are not valid as a React child (found: object with keys {title, time}). If you meant to render a collection of children, use an array instead.

コード

import "./styles.css";

const records = [
  { title: "勉強の記録1", time: 1 },
  { title: "勉強の記録2", time: 3 },
  { title: "勉強の記録3", time: 5 },
];

export default function App() {
  return (
    <div className="App">
      <h1>学習記録一覧</h1>
      {records.map((record) => (
        <p>{record}</p>
      ))}
      ;
    </div>
  );
}

原因

record内のkeyを指定できていなかったのが原因です。

解決策

このように指定してあげればOK

<p>
{record.title}
{record.time}時間
</p>