Render a react component inside a loop with gatsby blog data

Question

I have my component Images.js

function Images() {
  return (
    <StaticQuery
    query={query}
    render={data => (
        <div>
          {data.allImageSharp.nodes.map(image => (
            <img
              className="w-40 h-40 object-cover object-center"
              src={image.fluid.src}
              alt="random user"
            
            />
          ))}
        </div>
    )}
  />
  );
}
export default Images;

Now it basically returns 6 Images. When I try to render a image for each card the way below, of course, it doesn't work:

function Blog() {
  return (
    <div className="min-h-screen overflow-hidden">
        <Navbar />
      <div className="max-w-4xl mx-auto py-12 lg:py-16 ">
        <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
          <span className="block">Coming soon!</span>
          <span className="block text-indigo-600">I am just learning stuff about headless CMS and will build a blog here with strapi.io. Hang in!</span>
        </h2>
      </div>
      <StaticQuery
        query={query}
        render={data => (
          <div className="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5">
            
              {data.allStrapiArticles.edges.map(({ node:article })=> (
                <div className="rounded overflow-hidden shadow-lg">
                  <Images />
                  <ConsoleLog>{ Images }</ConsoleLog>
                  <h3 key={article.strapiId}>{article.title}</h3>
                </div>
              ))}
            
          </div>
        )}
      />
    <Footer />
    </div>
  );
}
export default Blog;

Is there a way, to display one image for each card using this component? Smth with a key maybe?

score 0 · Answer 1 · answered Apr 26 '21 at 20:34

You are mapping your images too so basically what's happening is all your images are rendered n times(n is the length of your array) on one card ,the problem you having is on the <Images/>

Suggestion

You could change how your query is structured and include the image data to the article data and pass the image URL as prop to the image component and it should look like something like this

function Images({src}) {
  return (
   
        <div>
          
            <img
              className="w-40 h-40 object-cover object-center"
              src={src}
              alt="random user"
            
            />
          
        </div>
    )}
  />
  );
}
export default Images;

and the blog component like so

{data.allStrapiArticles.edges.map(({ node:article })=> (
                <div className="rounded overflow-hidden shadow-lg">
                  <Images src={article.img} />
                  <ConsoleLog>{ Images }</ConsoleLog>
                  <h3 key={article.strapiId}>{article.title}</h3>
                </div>
              ))}

That is the problem, cause images are in the different query than the articles, so I need to do 2 queries which is totally destroys my layout. This way is just a bad way around this issue here https://stackoverflow.com/questions/67270962/strapi-gatsby-image-issue — Katharina Schreiber, Apr 26 '21 at 20:43

Render a react component inside a loop with gatsby blog data

1 Answers1

Suggestion