The Image above shows the error and the code I have attempted.Server Error TypeError: Cannot read properties of undefined (reading 'map')
This particular error occurred during the page generation process. Any console logs will appear in the terminal window.
In this case, I am attempting to map hardcoded data from .json files in my project. However, I keep encountering this error related to the map method.
import React, { useState } from "react";
import Link from "next/link";
import * as fs from 'fs';
// Step 1: Retrieve all files from the blogdata directory
// Step 2: Iterate through and display them
const blog = (props) => {
console.log(props);
const [blogs, setBlogs] = useState(props.allblogs);
return (
<>
<div className="section flex flex-col items-center mb-10">
{blogs.map((blogitem) => {
return (
<div
key={blogitem.slug}
className="cursor-pointer w-2/3 space-y-2 border-[2px] shadowimg p-5 border-black rounded-lg mt-10 flex flex-col justify-start"
>
<Link href={`/blogpost/${blogitem.slug}`}>
<h3 className="text-xl md:text-3xl font-semibold">
{blogitem.title}
</h3>
<p className="text-sm md:text-base my-4">
{blogitem.content.substr(0, 300)}....
</p>
<p className="text-right font-semibold md:text-lg">
-{blogitem.author}
</p>
</Link>
</div>
);
})}
</div>
</>
);
};
export async function getStaticProps(context) {
let data = await fs.promises.readdir("blogdata");
let myfile;
let allBlogs = [];
for (const element of data) {
const item = element;
console.log(item)
myfile = await fs.promises.readFile(('blogdata/' + item), 'utf-8')
allBlogs.push(JSON.parse(myfile))
}
return {
props: { allBlogs }, // will be passed to the page component as props
}
}
export default blog;