How to pass state to getStaticProps?

B

BABLGAM2222022-04-10 19:54:08

React

BABLGAM222, 2022-04-10 19:54:08

good time of the day, I've been trying to find an answer for a day now. I'm making a site with cards, and I need to display data in portions, for this I made useState, I made a button when pressed, 10 something will be added (for me it's 10 cards)
and I need to pass the state to getStaticProps. How can I do it?
if he wrote something on next.js/react.js

export async function getStaticProps({ context, getElemet}) {

  const response = await fetch('https://jsonplaceholder.typicode.com/photos');
  const data = await response.json();

  let daraRes = data.reverse();
  let dataRes = daraRes.slice(0, getElemet);
  console.log(dataRes);

  if ( !data ) {
    return {  
      notFound: true,
    }
  }

  return {
    props: {contents: dataRes}, 
  }
}

export default function Home({ contents }) {
  const [count, setCount] = useState(10);

  return (
    <>
      <Head>
        <title>
          post main page |  NIKITA.com
        </title>
      </Head>

    <div className="cardBlock">
        {contents && contents.map(({ id, title, url }) => (
          <CardProject key={id} id={id} title={title} descr={title} image={url}/>
        ))}
    </div>
    <button className="cardBlock_add-card"  onClick={()  => setCount(count + 10)}> показать еще </button>
      {getStaticProps(getElemet = count)}
    </>
  )
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

V

Veniamin Ryadnov, 2022-04-11
@veniameen

getStaticProps - generates static pages at build time. In your case, you need to create an api and use fetch to access it.
https://nextjs.org/docs/api-routes/introduction