After following a tutorial that demonstrated how to request data from an API and display it, I encountered an issue when trying to view the page in my NextJs project. The error message "banner.map is not a function" appeared. Below is the code snippet where the problem occurs. Any assistance would be greatly appreciated. The API being called is "https://fortnite-api.com/v1/banners", which returns an array of objects.
export const getStaticProps = async () => {
const res = await fetch('https://fortnite-api.com/v1/banners');
const data = await res.json();
return {
props: { banners: data}
}
}
const FortniteApi = ({ banners }) => {
return (
<div>
<h1>Fortnite Api</h1>
{banners.map(banner => (
<div key={banner.id}>
<a>
<h3>{banner.name}</h3>
</a>
</div>
))}
</div>
)
}
export default FortniteApi