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.
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 },
};
}