So, I have a file data.js where there is an array with some navigation items.
export const footerNavigation = [
{
category: 'Resources',
items: [
{
href: '',
text: 'Guides'
},
{
href: '',
text: 'Blog'
},
{
href: '',
text: 'Customer stories'
},
{
href: '',
text: 'Glossery'
}
]
},
{
category: 'Resources',
items: [
{
href: '',
text: 'Guides'
},
{
href: '',
text: 'Blog'
},
{
href: '',
text: 'Customer stories'
},
{
href: '',
text: 'Glossery'
}
]
},
];
Footer.jsx
import React from 'react';
import { footerNavigation } from '../data/data';
const Footer = () => {
return (
<div>
{footerNavigation.map((item, index) => {
return (
<div key={index}>
<h3 className='text-lg font-bold mb-8'>{item.category}</h3>
<ul>
<li>
<a href=""></a>
</li>
</ul>
</div>
)
})}
</div>
)
}
export default Footer;
The task is to make sure there is an href value inside a link tag like <a href={.href}</a> and the value of the item here <a>{.value}</a>
I have a basic understanding how to map items that are in the initial array, but have no clue how to map the array that is inside an object which is inside the initial array.
You only missing another items iteration:
const Footer = () => {
return (
<div>
{/* category unique acts as key */}
{footerNavigation.map(({ category, items }) => {
return (
<div key={category}>
<h3 className="text-lg font-bold mb-8">{category}</h3>
<ul>
{/* text unique should be a key */}
{items.map(({ href, text }) => (
<a key={text} href={href}>
{text}
</a>
))}
</ul>
</div>
);
})}
</div>
);
};