When attempting to iterate through products in a json file, I encountered the error TypeError: products.map is not a function
Below is the code snippet:
import React from "react"; import Link from "next/link";
function shop({ products }) { return (
<div>
<nav>
<Link href="/">Home</Link>
<Link href="/shop">Shop</Link>
</nav>
<div className="title1">
<h1>Explore All Products</h1>
</div>
<>
{products.map((product) => { return (
<div key={product.id}>
<Link href="">
<h2>
{product.id} {product.title}
</h2>
</Link>
</div>
);
})}
</>
</div> ); }
export default shop;
export async function getStaticProps() { const response = await fetch("https://dummyjson.com/products"); const data = await response.json(); console.log(data);
return { props: { products: data,
}, }; }
I have tried various solutions shared on stack overflow but none have resolved the issue.