output [object object] from array .map

Question

I'm having trouble mapping my gallery image urls into the src field. The output is [object object]. Any pointers on where im going on would be great!

code -

   <div className="image-grid">
                {data.home.galleryImage.map((url, index) => (
                      <div className="image-item" key={`${index}-cl`}>
                       <img src={url} alt={"no alt :("} />
                      </div>
                ))
                }
   </div>

graphql query -

export const query = graphql`
  query GetSingleHome($slug: String) {
    home: strapiHomes(slug: { eq: $slug }) {
    galleryImage {
      url
    }
    }
  }
`

https://stackoverflow.com/questions/4750225/what-does-object-object-mean — CBroe, Dec 14 '20 at 12:11

Ferran Buireu · Accepted Answer · 2020-12-14T12:56:35.747

Your url item is the iterable object, not the url itself. Change it to:

   <div className="image-grid">
                {data.home.galleryImage.map((image, index) => (
                      <div className="image-item" key={`${index}-cl`}>
                       <img src={image.url} alt={"no alt :("} />
                      </div>
                ))
                }
   </div>

Now your iterable object is image (what makes more sense), which contains an array of galleryImage, so to access the nested property you need to get image.url.

You can keep your previous approach using a destructing when declaring the iterable variable:

   <div className="image-grid">
                {data.home.galleryImage.map(({url}) => (
                      <div className="image-item" key={`${url}-cl`}>
                       <img src={url} alt={"no alt :("} />
                      </div>
                ))
                }
   </div>

For more information check the map docs.

output [object object] from array .map

1 Answers1