Entonces, tengo un archivo data.js donde hay una matriz con algunos elementos de navegación.
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; La tarea es asegurarse de que haya un valor href dentro de una etiqueta de enlace como <a href={.href}</a> y el valor del elemento aquí <a>{.value}</a>
Tengo una comprensión básica de cómo mapear elementos que están en la matriz inicial, pero no tengo ni idea de cómo mapear la matriz que está dentro de un objeto que está dentro de la matriz inicial.
Solo te falta otra iteración de elementos:
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> ); };