const course = [{ id: 1, name: 'Half Stack application development', 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 } ] } ]Descubrí que es fácil mapear los nombres "Half Stack Application Development" y "Node.js" y mostrarlos haciendo:
{course.map(c => <li>{c.name}</li>)} Sin embargo, course.parts.map(c => <li>{c.name}</li>) devuelve indefinido.
¿Cómo lo mapearías para que se vea como
Desarrollo de aplicaciones de media pila
Nodo.js
¿Por qué curso.partes.mapa(p => p.nombre) devuelve indefinido y cómo puede acceder a los nombres en la matriz de partes?
A continuación, se presenta una demostración funcional que usa fragmentos de pila y ReactJS (v 16.8.0) que logra el objetivo deseado.
const Thingy = ({courses, ...props}) => { return ( <div> {courses.map(c => ( // iterate over the "courses" array <div> <h4>{c.name}</h4> {c.parts.map(p => ( // now, for each "course", iterate over "parts" array <li>{p.name}</li> ))} </div> ))} </div> ); }; const course = [{ id: 1, name: 'Half Stack application development', 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 } ] } ] ReactDOM.render( <div> DEMO <Thingy courses={course} /> </div>, document.getElementById("rd") ); <div id="rd" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>Explicación
Se agregaron comentarios en línea al fragmento anterior.
El course y las parts son matrices, por lo que no puede obtener el curso. course.parts directamente. Puede hacer un mapa doble para las representaciones como a continuación
{course.map(c => <> <p>{c.name}</p> <ul> {c.parts.map(part => <li>{part.name}</li>)} </ul> </>)}Tendrías que hacer un mapa dentro de un mapa.
Esto debería funcionar:
<ul> {course.map(c => ( <> <li>{c.name}</li> <ul> {c.parts.map(p => <li>{p.name}</li>)} </ul> </> ))} </ul>