CODEWITHSUNDEEP
reactjsgatsby
Gopesh Sharma
Gopesh Sharma

Reputation: 7030

ES6 Map Returning Null in Gatsby

I have a JSON file which provides the value to Gatsby and Gatsby through the gatsby-source-filesystem reads that file. I am using GraphQL with gatsby-transformer-json which gives me the query like below to access all the values of JSON in the code

    {
      allSrcJson {
       totalCount
       edges {
         node {
          total
          results {
            account
          }
       }
     }
   }
 }

Now in my code when I am trying to do a .map, it works on the first time whereas next time it says Cannot read property 'account' of undefined whereas when I write node.results[0].account it gives me the result.

{data.allSrcJson.edges.map(({ node }) => (
   <div key={node.total}>
     <p>{node.total}</p>
     {node.results.map(({ result }) => (
       <p>{result.account}</p>
     ))};
   </div>
))}

Upvotes: 0

Views: 471

Answers (1)

tenor528
tenor528

Reputation: 1175

It is hard to diagnose this without seeing the data, but it sounds like there is at least member of your results array that does not have a result property on it. If you try taking out the second object destructuring, and log out the object, you'll see which one is failing. (Or maybe you meant to do the second object destructuring like this node.results.map({ account }))

{node.results.map(obj => {
    console.log(obj)
    if (obj.result) {
        return <p>{obj.result.account}</p>
    } else return null
})

Upvotes: 1

Related Questions