Mapped data passing same value to gatsby-link prop

Hey all, first time post here i hope it’s allowed/i’m doing it right. Anyways I’m mapping over some data (3 image slides i have stored in a headless cms). I am passing the returned data into slide component, and from there its being passed down to a button component, which is just a ‘gatsby-link’. The mapped data contains a “page_link”, among other things that should be different for each slide. However, for some reason, the same “page_link” is being passed down to each button, even though they should all be different. I am logging my data in the console and can confirm that each array i am mapping over contains different data. I get the different image, title, text, etc fields for each slide, but i am receiving the same “page_link” for each slide. I am confused as to what i am doing wrong.

Heres my code:

GraphQL Query:

const HOMEPAGE_DATA = graphql`
  query {
    prismicHomePage {
      data {
        body {
        slider {
          title {
            text
          }
          text {
            text
          }
          page_link{
           text
          }
          button_text{
           text
          }
          image {
            localFile {
              childImageSharp {
                fluid(maxWidth: 1280, quality: 90) {
                  ...GatsbyImageSharpFluid_withWebp
                }
              }
            }
          }
        }
      }
    }
  }
`

  // get homepage data
  const data = useStaticQuery(HOMEPAGE_DATA)

  // simplify data
  const home_data = data.prismicHomePage.data

Mapped Data:

        {home_data.slider.map((slide, index) => {
          console.log(slide)
          return (
            <Slide
              key={slide.title.text}
              title={slide.title.text}
              image={slide.image.localFile.childImageSharp.fluid}
              text={slide.text.text}
              button_text={slide.button_text.text}
              path_link={slide.page_link.text}
            />
          )
        })}

Slide Component:

const Slide = props => {
  return (
    <StyledBackgroundImage fluid={props.image} alt={`${props.title}`}>
      <Wrapper>
        <SlideContent>
          <h1>{props.title}</h1>
          <p>{props.text}</p>

          <div className="slide-btn">
            <Button path={props.path_link} text={props.button_text} />
          </div>
        </SlideContent>
      </Wrapper>
    </StyledBackgroundImage>
  )
}

Button Component: The <StyledButton /> is just a Styled “Link” Component from Gatsby.

const Button = props => {
  return (
    <StyledButton to={props.path} title={`${props.text}`}>
      {props.text}
    </StyledButton>
  )
}

[jonniebigodes]

@vinyltek if you don’t mind creating a reproduction with your code and package you’re using, following these steps, i wouldn’t mind taking a look at it and possibly solve the issue you’re experiencing. Sounds good?

[jonniebigodes]

@vinyltek that was my thought aswell, this small thing was the issue? To be honest, when i saw the issue i’ve linked,i was laughing like a mad man as at that stage i had amost of the website’s code rewritten… and your answer quasi ready to be posted 😃.

No need to thank, i’m glad that i was able to solve your issue.

If you don’t mind, i’m going to close this issue as it’s resolved, should any related items pop up feel free to re-open it and comment.