Gatsby/React how to render dynamic images with GatsbyImage plugin


I am able to console out the data I want after mapping through my data from my graphql query. Is it possible to render after mapping several times?

const gatsbyComponent = ({ data }) => {
return (
<Layout>
{data.allFiles.nodes.map((item) => {
        Object.entries(item).map(([key, value]) => {
          value.map((image) => {
            console.log("Individual image", image) // Logs show the data I want
            return ( 
              <>
                <GatsbyImage
                  image={image.gatsbyImageData}
                  alt={image.description}
                />
                <div className="text-lg">{image.description}</div>
              </>
            )
          })
        })
      })}
 </Layout>
 )
}

The data from graphql/contentful is an array of objects. Then I am mapping through each individual item object. After that I am mapping through each value which is an array of objects… Although I am getting the correct logs for the gatsby image data is there a way to render them this way?

Source: React – Stack Overflow

November 30, 2021
Category : News
Tags: contentful | gatsby | graphql | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.