Opening modals after clicking specific image and pass data to that modal

[DennisKraaijeveld]

Hi! Right now I am building a Instagram feed component to display my latest posts.

Link to the GIF to show how it looks like right now
Instagram Component

However, I do want to open up a modal after I click this image. Making that modal is no problem, but getting the right information displayed is. Since these are React components I can not pass ID variables and use a page query to get the information. I tried something with StaticQuery, but without any succes. What is a recommended way to pass the correct information to each modal?

The current structure:

Index.js

import * as React from "react"
import { graphql } from "gatsby"
import { Layout } from "../components/layout"
import InstagramFeed from "../components/instagram-feed"


export default function IndexPage({ data }) {
  if (!data) return null


  
  return (
    <Layout>
          <InstagramFeed posts={data.allInstagramContent} />
    </Layout>
  )
}

export const query = graphql`
  {
    allInstagramContent(limit: 6) {
      edges {
        node {
          id
          caption
          localFile {
            childImageSharp {
              gatsbyImageData(
                layout: CONSTRAINED
                placeholder: BLURRED
                width: 500
                height: 500
                formats: AVIF
                quality: 85
              )
            }
          }
        }
      }
    }
  }
`

Here I pass all the data to my Feed Component, which then maps over the data and displays the images in a row

Feed Component

import React, { Fragment, useRef, useState } from "react"
import { GatsbyImage } from "gatsby-plugin-image"

import { Dialog, Transition } from "@headlessui/react"

import InstagramModal from "./instagram-modal"

import { TiSocialInstagram } from "react-icons/ti"

const InstagramFeed = ({ posts }) => {
  const [open, setOpen] = useState(false)

  const cancelButtonRef = useRef(null)

  const [postId, setPostId] = useState(null)



  return (
    <>
      <div
        className="relative clear-both mx-auto mt-8 text-center"
        onClick={() => setOpen(true)}
      >
        <div className="grid grid-cols-6">
          {posts.edges.map(
            (item) =>
              item.node.localFile &&
              (console.log(item),
              (
                <div
                  className="insta-container"
                  onClick={() => setPostId(item.node.id)}
                >
                  <GatsbyImage
                    image={item.node.localFile.childImageSharp.gatsbyImageData}
                    alt={item.node.caption || "Instagram Post"}
                    key={item.node.id}
                    className="insta-container--image"
                  />
                  <div className="modal">
                    <div className="text">
                      <TiSocialInstagram className="w-10 h-10 text-white cursor-pointer" />
                    </div>
                  </div>
                </div>
              ))
          )}
        </div>
      </div>
      {/* <InstagramModal postId={postId} /> */}
    </>
  )
}

export default InstagramFeed

Hope somebody can get me in the right direction :) Thanks!