CODEWITHSUNDEEP
javascriptreactjsjsonaxiosnext.js
Manshul Duggal
Manshul Duggal

Reputation: 51

cant map over and fetch the data present inside an array of objects

I had an assignment which i was not able to do since i was busy but out of curiosity I am trying to do it. I have this api https://dev-api.fitnessfuel360.com/app/home from which i am trying to get the items and the data present in it. I am currently trying to use Nextjs in which axios is being used. this is what my code looks like as of now.

//Index.js file where Base_url is the api
  const { items } = await axios.get(Base_URL);

    return {
        props: { items: items },
    };
}

I am then passing Items to the the component where i want to render out the data present inside of the items array.

//my productSection.js component
   <div>
                {items.map((items) => (
                    <h1>{items.slug}</h1>
                ))}
            </div>

However this gives me an error saying Error: Error serializing `.items` returned from getServerSideProps in "/". Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

So how do i access the information inside of this Items array? There were some points mentioned in the assignment as well like object has 2 properties type and data. Type key decides which component to render and data will be passed to to the component and Code should not throw error on invalid types in json I Have not used key to render out component before so this goes over my head. Please understand that I am still a beginner so yeah, Please let me know what to do here and how to achieve this. Thank you for your time.

Upvotes: 1

Views: 677

Answers (1)

lpizzinidev
lpizzinidev

Reputation: 13284

axios return a response object with a data property, try to change your code like this

 const { data } = await axios.get(Base_URL);

    return {
        props: { items: data.items },
    };
}

Upvotes: 2

Related Questions