Hey there! I've been trying to fetch data from the API endpoint in my NextJs application using axios. However, whenever I try to map over the retrieved data, NextJs keeps throwing the error message "TypeError: Cannot read property 'map' of undefined". Does anyone have any suggestions on how to resolve this issue?
import axios from "axios"
const CosmeticsApi = ({cosmetics}) => {
return (
<div>
{cosmetics.map(cosmetic =>(
<div key={cosmetic.id}>
<h4>{cosmetic.name}</h4>
</div>
))}
</div>
)
}
CosmeticsApi.getInitalProps = async ctx => {
try {
const res = await axios.get('https://fortnite-api.com/v2/cosmetics/br');
const cosmetics = res.data;
return { cosmetics };
} catch (error) {
return {error};
};
};
export default CosmeticsApi;