title: Iterating object from getStaticProps and displaying in component template
body: <p>I am trying to display the results for a database fetch that occured withing <code>getStaticProps</code> but when I map the object in the component template I get the following errors. I would like to display all the data from the returned data.</p>
  <p>My code:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;
  import { GetStaticProps } from &quot;next&quot;
  
  // pages/index.tsx
  import prisma from '../lib/prisma'
  
  export const getStaticProps: GetStaticProps = async () =&gt; {
    const tracks = await prisma.tracks.findMany();
    return { props: { tracks } };
  };
  
  const Tracks = ({ tracks }) =&gt; {
    console.log(tracks)
  
    return (
      &lt;div&gt;
        &lt;h1&gt;All Tracks&lt;/h1&gt;
        {tracks.map((track ) =&gt; (
          &lt;div&gt;{track.ts}&lt;/div&gt;
          ))}
     &lt;/div&gt;
    );
  }
  
  export default Tracks;
  </code></pre>
  <p>Error:</p>
  <pre><code>Unhandled Runtime Error
  
  Error: Objects are not valid as a React child (found: Sat Jun 27 2020 17:43:15 GMT-0500 (Central Daylight Time)). If you meant to render a collection of children, use an array instead.
  </code></pre>
  <p>Here is what the response looks like:</p>
  <p><a href="https://i.stack.imgur.com/5B53g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5B53g.png" alt="enter image description here" /></a></p>