Reactjs(Nextjs): Cannot read properties of undefined (reading 'map') Reactjs(Nextjs)

Question

I want to ask about this error, I need your help, cause I'm seeing an course from youtube and only me is getting this error and I dont know why.

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import {
    GraphQLClient,
    gql
} from 'graphql-request';
import BlogCard from '../components/BlogCard';

const graphcms = new GraphQLClient("https://api-eu-central-1.graphcms.com/v2/cl3wfrf6agpo701z13eawdfat/master");

const QUERY = gql`

{
  posts{
    id,
    title,
    datePublished,
    slug,
    content{
      html
    }
    author{
      name,
      avatar{
        url
      }
    }
    coverPhoto{
      url
    }
  }
}
`;

export async function getStaticProp() {
    const {
        posts
    } = await graphcms.request(QUERY);
    return {
        props: {
            posts,
        },
        revalidate: 10,
    };
}

export default function Home({
    posts
}) {
    return ( <
        div className = {
            styles.container
        } >
        <
        Head >
        <
        title > Create Next App < /title> <
        meta name = "description"
        content = "Generated by create next app" / >
        <
        link rel = "icon"
        href = "/favicon.ico" / >
        <
        /Head>

        <
        main className = {
            styles.main
        } > {
            posts.map((post) => ( <
                BlogCard title = {
                    post.title
                }
                author = {
                    post.author
                }
                coverPhoto = {
                    post.coverPhoto
                }
                key = {
                    post.id
                }
                datePublished = {
                    post.datePublished
                }
                slug = {
                    post.slug
                } >
                <
                /BlogCard>
            ))
        } <
        /main> < /
        div >
    )
}

I am getting this error and I don't know why

Here is a screenshot of error:

Answer 1

The posts variable is probably empty, you might want to add a check before you iterate like below.

 <main className={styles.main} > 
 {posts && Array.isArray(posts) && posts.map((post) => ( 
    <BlogCard
      title={post.title}
      author={post.author}
      coverPhoto={post.coverPhoto}
      key={post.id}
      datePublished={post.datePublished}
      slug={post.slug}
     ></BlogCard>
   ))
} 
</main>