how to display data from graphql query Gatsbyjs?

Question

I need some help here. I am using Gatsbyjs and contentful. I have queried the data using graphql. I can see the object but i can't seem to display it in a div. What am I missing here? The error keeps saying can't read undefined properties of map. Is there another way of doing this? The content includes text, image and an mp3. Let me know what I am missing here.

This is the code

const IndexPage = ({data}) => {
  
  console.log(data);
  
  return (
    <div>
    {data.edges.map(edge => <p key={edge} >{edge}</p>)}
    </div>
      )
}

export const query = graphql `
query MyQuery {
  allContentfulPodcast {
    edges {
      node {
        title
        thumbnail {
          file {
            details {
              image {
                height
                width
              }
              size
            }
            fileName
            url
          }
        }
        video {
          file {
            fileName
            url
          }
        }
      }
    }
  }
}

console log object

{
    "allContentfulPodcast": {
        "edges": [
            {
                "node": {
                    "title": "Welcome to our show",
                    "thumbnail": {
                        "file": {
                            "details": {
                                "image": {
                                    "height": 5304,
                                    "width": 7952
                                },
                                "size": 4752704
                            },
                            "fileName": "business.jpg",
                            "url": "//images.ctfassets.net/hi3b2mc578jm/3wxzzKv4Rblsv1FAUR2SQ/d8f09ade7e9fc57afa2f425bb2da9ed5/business.jpg"
                        }
                    },
                    "video": {
                        "file": {
                            "fileName": "watch",
                            "url": "//assets.ctfassets.net/hi3b2mc578jm/4kK38bwyJRxPYoM3SADQrU/4b11d4079052f651685a407c7fc6ecb4/watch"
                        }
                    }
                }
            }
        ]
    }
}

Answer 1

You've to pass some value to <p> tag instead of the whole object. For example:

<div>
  {data.allContentfulPodcast.edges.map((edge, index) => <p key={index}>{edge.node.title}</p>)}
</div>

Answer 2

You're missing another level of your object: "can't read undefined properties of map" you should try:

  return (
    <div>
      {data.allContentfulPodcast.edges.map(edge => <p key={edge.node.title} >{edge}</p>)}
    </div>
    )