Skip to content
Get help on Slack

Issue with using .map in a dynamic page handling file

6 replies
Last updated: Jul 5, 2022
is it possible to use
.map
in a dynamic page handeling like

[id].js
that contains

getStaticPaths
because when I try that it gives me that the xxx.map is not a function
Jul 4, 2022, 1:41 PM
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
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
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
your query would look something like this:
export const query = `
  *[_type == 'your_document' && defined(slug.current)].slug.current
`
Jul 4, 2022, 3:19 PM
well I have something like this
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;
I want to use a map to grab products from my collection but right now it returns

Unhandled Runtime Error
TypeError: coldata.map is not a function

Jul 5, 2022, 6:49 AM
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.

Get started for freeExplore the demo

Was this answer helpful?