I'm encountering an issue with displaying the results of a database fetch that occurred within the getStaticProps function. When I try to map the object in my component template, I receive certain errors. My goal is to showcase all the data retrieved from the fetched data.
This is the code snippet:
import React from "react"
import { GetStaticProps } from "next"
// pages/index.tsx
import prisma from '../lib/prisma'
export const getStaticProps: GetStaticProps = async () => {
const tracks = await prisma.tracks.findMany();
return { props: { tracks } };
};
const Tracks = ({ tracks }) => {
console.log(tracks)
return (
<div>
<h1>All Tracks</h1>
{tracks.map((track ) => (
<div>{track.ts}</div>
))}
</div>
);
}
export default Tracks;
The specific error I'm facing is:
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.
This is how the response data is structured: