I've successfully managed to bring the data back from Contentful but I can't seem to map further into the array. I'm not sure what I'm doing wrong as I'm getting the following error: field.fields.map is not a function
export default function Header({ links }) {
console.log(links);
return (
<div className='header-links'>
<ul className='flex text-white uppercase tracking-widest font-medium'>
{links.map((link) => (
<div key={link.title}>
{link.links.map((field) => {
<div>
{field.fields.map((singleLink) => (
<p>{singleLink.title}</p>
))}
</div>;
})}
</div>
))}
</ul>
</div>
);
}[
{
"title": "Header",
"logo": {},
"links": [
{
"fields": {
"title": "Home",
"slug": "/"
}
},
{
"fields": {
"title": "Food",
"slug": "/Food"
}
},
]
}
]
Change it in this way. When you are inside the field, they are already object so you can not map like array anymore
export default function Header({ links }) {
console.log(links);
return (
<div className='header-links'>
<ul className='flex text-white uppercase tracking-widest font-medium'>
{links.map((link) => (
<div key={link.title}>
{link?.links?.map((field) => (
<div>
<p>{field?.fields?.title}</p>
</div>
)
)}
</div>
))}
</ul>
</div>
);
}