CODEWITHSUNDEEP
javascriptnode.jsreactjsnext.js
Elith
Elith

Reputation: 21

Props not passing from getStaticPaths() to getStaticProps()

I created dynamic pages from a JSON in nextJS using getStaticPaths(), it works but I'm not able to use the information inside of the JSON, I'm passing it as props to the getStaticProps(), but when I console log it, it says undefined.

This is the getStaticPaths(), getting the JSON, then creating the paths. All working.

export async function getStaticPaths() {
  const influencers = influencersData
  const paths = influencers.map((influencer) => {
    const influencerId = influencer.name.toLowerCase().replace(/ /g, '-')
    return {
      params: {
        influencerId,
      },
    }
  })
  console.log(paths)
  return {
    paths,
    fallback: false,
  }
}

Then this is getStaticProps()

export async function getStaticProps({ params }) {
  const influencerId = params.influencerId.replace(/\-/g, '+')
  const results = influencersData.filter(
    (influencer) => influencer.name === influencerId
  )
  console.log(results)
  return {
    props: {
      influencer: results[0],
    },
  }
}

and then this is the default function I'm exporting to create the dynamic page

export default function influencerPage(influencer) {

  console.log(influencer) /// This returns undefined 

  return (
    <>
     {influencer.name}
    </>
  )

As I'm getting undefined I cannot use the information in the JSON. Am I doing something wrong?

Upvotes: 2

Views: 470

Answers (1)

mocherfaoui
mocherfaoui

Reputation: 1217

influencer is a prop so it should have curly brackets around it: export default function influencerPage({influencer})

Upvotes: 1

Related Questions