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
    }
    }
  }
`

stackoverflow.com/questions/4750225/…

C3roe
– C3roe

2020-12-14 12:11:15 +00:00
Commented Dec 14, 2020 at 12:11 — C3roe
– C3roe, Commented Dec 14, 2020 at 12:11

Ferran Buireu · Accepted Answer · 2020-12-14 12:56:35Z

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.

Collectives™ on Stack Overflow

output [object object] from array .map

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related