I'm a beginner in JS and I'm currently struggling to figure out how to display the data from a json file as HTML elements.
Whenever I run my code on the development server, I encounter the error message: "props.books.map is not a function".
I suspect that the format of my json file might be causing this issue, as it doesn't seem to match what .map requires. (I'm unsure about the correct structure for static json files since there are various examples online. If anyone has resources on industry standard json file formats, I would greatly appreciate it!)
Here's a snippet of the json file:
Below is the code where I attempt to map the json file:
./pages/content/books.tsx
import NavBar from "@/components/NavBar";
import { NextPage, GetStaticProps } from "next";
const Books: NextPage<{
books: {
author: string;
dateFinish: string;
dateStart: string;
rating: string;
review: string;
title: string;
}[];
}> = (props) => {
return (
<div className="justify-between items-center bg-gradient-to-b from-slate-600 to-slate-900 p-10 w-screen h-screen">
<NavBar />
<h1>Books</h1>
{props.books.map((x) => {
return <p>{x.title}</p>;
})}
</div>
);
};
export const getStaticProps: GetStaticProps = async () => {
const books = (await import("../../static/bookReviews.json")).default;
return {
props: { books },
};
};
export default Books;
If you need more information to help me with this issue, please let me know.
Any assistance would be highly appreciated :)