Question

140

Next.js, getStaticProps not working with component but does with page

rated 0 times [ 146] [ 6] / answers: 1 / hits: 5141 / 2 Years ago, tue, march 1, 2022, 12:00:00

If I visit this code on local host, it is able to pull data from the API and then display it on a card.

import { formatNumber, parseTimestampJM } from '../../utils';



import { Card } from './UserTransactions.styled';



// STEP 1 : fetch data from api

export async function getStaticProps() {

  const res = await fetch(

    'https://proton.api.atomicassets.io/atomicmarket/v1/sales'

  );

  const data = await res.json();

  return {

    props: {

      data,

    },

  };

}



function UserTransactionsComponent({ data }) {

  const results = data;

  console.log(results);

  return (

    <PageLayout>

      <div>

        <h1>This is a list of User Transactions!</h1>

      </div>

      <ul>

        {results.data.map((result) => {

          const {

            sale_id,

            buyer,

            seller,

            listing_price,

            listing_symbol,

            created_at_time,

          } = result;



          if (buyer !== null) {

            return (

              <Card>

                <li key={sale_id}>

                  <h3>

                    {seller} just sold item number {sale_id} to {buyer} for{' '}

                    {formatNumber(listing_price)} {listing_symbol} at{' '}

                    {parseTimestampJM(created_at_time)}

                  </h3>

                </li>

              </Card>

            );

          }

        })}

      </ul>

    </PageLayout>

  );

}



export default UserTransactionsComponent;

When I create a component and then call it in to my index page like so:

    <PageLayout>

      <Banner modalType={MODAL_TYPES.CLAIM} />

      <ExploreCard />

      <HomepageStatistics />

      <Title>New &amp; Noteworthy</Title>

      <UserTransactionsComponent />



      <Grid items={featuredTemplates} />

    </PageLayout>

  );

};



export default MarketPlace;

it gives me the following error

TypeError: Cannot read properties of undefined (reading 'data')

  27 | <ul>

> 28 |   {results.data.map((result) => {

     |           ^

  29 |     const {

  30 |       sale_id,

  31 |       buyer,

I think that the reason I'm getting this error is because of the way the data is being fetched. Perhaps it's not being included in the component.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aileent

Add To Favorites

Follow

Total Points: 556

Total Questions: 107

Total Answers: 101

Location: Croatia

Member since Fri, Sep 11, 2020

4 Years ago

aileent questions

1 Why am I getting Failed to load extension. Invalid value for 'content_security_policy'?

Fri, Apr 16, 21, 00:00, 3 Years ago

1 Laravel livewire model is not working when updating input field from javascript?

Sun, Nov 29, 20, 00:00, 4 Years ago

1 How to get Input field type as props in react typescript

Wed, Nov 11, 20, 00:00, 4 Years ago

1 React Native Render error missing semicolon

Fri, May 8, 20, 00:00, 4 Years ago

1 Display only one element at a time in react with .map()

Sat, Sep 28, 19, 00:00, 5 Years ago

View All

answered 2 Years ago adilene · Accepted Answer

getStaticProps works only for page components inside pages folder. And the data is fetched at build time.
Here is what the documentation says:

getStaticProps can only be exported from a page. You cannot export it from non-page files, _app, _document, or _error.

If you wanna use UserTransactionsComponent as a normal component, you should use useEffect and make the API call on mount:

import {useState, useEffect} from "react"



function UserTransactionsComponent() {



  const [data, setData]=useState();



  useEffect(()=>{

    async function fetchData() {

      const res = await fetch(

        'https://proton.api.atomicassets.io/atomicmarket/v1/sales'

      );

      const {data} = await res.json();

      setData(data)

    }

    fetchData()

  },[]);



  if(!data){

   return (<div>Loading...</div>)

  }



  return (

    <PageLayout>

      <div>

        <h1>This is a list of User Transactions!</h1>

      </div>

      <ul>

        {data.map((result) => {

          const {

            sale_id,

            buyer,

            seller,

            listing_price,

            listing_symbol,

            created_at_time,

          } = result;



          if (buyer !== null) {

            return (

              <Card>

                <li key={sale_id}>

                  <h3>

                    {seller} just sold item number {sale_id} to {buyer} for{' '}

                    {formatNumber(listing_price)} {listing_symbol} at{' '}

                    {parseTimestampJM(created_at_time)}

                  </h3>

                </li>

              </Card>

            );

          }

        })}

      </ul>

    </PageLayout>

  );

}



export default UserTransactionsComponent;