Issue with using .map in a dynamic page handling file
6 replies
Last updated: Jul 5, 2022
S
is it possible to use
in a dynamic page handeling like
that contains
because when I try that it gives me that the xxx.map is not a function
.map
[id].js
getStaticPaths
Jul 4, 2022, 1:41 PM
K
Maybe make sure that the data you are trying to map over is available? You can add a ternary ‘?’ to check if its is eg; {categories.map((category) => ( <li key={category}>{category}</li>
))}
))}
Jul 4, 2022, 2:11 PM
K
Maybe make sure that the data you are trying to map over is available? You can add a ternary ‘?’ to check if its is. I’ve run into this issue quite a bit when trying to map data passed down as a prop, forgetting that props wrap your data in an object.
Jul 4, 2022, 2:15 PM
T
Yes, you usually map over slugs to generate pages. Here is an example (using TS):
export const getStaticPaths: GetStaticPaths = async () => {
const data = await sanityClient.fetch(query.documentSlugs, { doc: 'category' })
const paths = data.map((slug: string) => ({ params: { slug } }))
return {
paths,
fallback: false
}
}Jul 4, 2022, 3:18 PM
T
your query would look something like this:
export const query = ` *[_type == 'your_document' && defined(slug.current)].slug.current `
Jul 4, 2022, 3:19 PM
S
well I have something like this
I want to use a map to grab products from my collection but right now it returns
const CollectionProducts = ({ coldata }) => {
return (
<div>
{coldata.map((test) => (
<div>
</div>
))}
);
};
export const getStaticPaths = async () => {
// Fetch all the product
const coldata = await shopifyClient.collection.fetchAllWithProducts();
const paths = coldata.map((coldata) => ({
params: {
title: coldata.title,
},
}));
return {
paths,
fallback: "blocking",
};
};
export const getStaticProps = async ({ params: { title } }) => {
// Fetch all the product
const coldata = await shopifyClient.collection.fetchByHandle(title);
console.log(coldata);
return {
props: {
coldata: parseShopifyResponse(coldata),
},
};
};
export default CollectionProducts;Unhandled Runtime Error TypeError: coldata.map is not a function
Jul 5, 2022, 6:49 AM
S
Figured out what the problem was. I needed to target coldata.products.map because I was already in the collection of this fetch
Jul 5, 2022, 7:08 AM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.