Anteriormente estaba usando map() para recorrer los valores de un solo accesorio dentro de un objeto.
const Content = (p)=>{ console.log(p) const {parts} =p return ( <div> {parts.map((item)=> <Part key={item.id} part={item.name} exercise={item.exercises}/> )} </div> ) }Ahora que el objeto se expande a una matriz de objetos, ¿cómo seguiré recorriendo mis valores?
const course = [ { name:'Half Stack application development', id:1, parts: [ { name:'Fundamentals of React', exercises: 10, id: 1 }, { name:'Using props to pass data', exercises:7, id: 2 }, { name:'State of a component', exercises:14, id: 3 } ] }, { name: 'Node.js', id: 2, parts: [ { name: 'Routing', exercises: 3, id: 1 }, { name: 'Middlewares', exercises: 7, id: 2 } ] } ]¿Se supone que debo usar un mapa dentro de un mapa? Si es así, ¿cómo debo implementarlo?
puede anidar bucles.
{course.map((item)=> { items.parts.map((p)=><Part key={p.id} part={p.name} exercise= {p.exercises}/> ) } )}Hay muchos enfoques, uno de los cuales es:
Simplemente cree una matriz de elementos JSX, antes de su declaración de devolución. Renderice esa matriz directamente. Aquí hay un ejemplo simple con una etiqueta p . Puedes usar tu propio componente:
import "./styles.css"; export default function App() { const course = [ { name:'Half Stack application development', id:1, parts: [ { name:'Fundamentals of React', exercises: 10, id: 1 }, { name:'Using props to pass data', exercises:7, id: 2 }, { name:'State of a component', exercises:14, id: 3 } ] }, { name: 'Node.js', id: 2, parts: [ { name: 'Routing', exercises: 3, id: 1 }, { name: 'Middlewares', exercises: 7, id: 2 } ] } ]; let comp = []; course.forEach((p) => { comp = [comp, ...(p.parts).map((item)=> <p key={item.id}>{item.name}</p> )]; }); return ( <div> {comp} </div> ) }Un enfoque corto es usar flatMap junto con map:
<div> { course.flatMap(el1 => el1.parts.map(el2 => <Part key={el2.id} part={el2.name} exercise={el2.exercises} /> ) } </div>