Obtuve 2 objetos dentro de la matriz, y el primer objeto es más largo que el segundo objeto. ¿Cómo puedo representar todas las propiedades del primer objeto sin quedar indefinido? Me quedo sin definir porque solo existen 2 propiedades en el segundo objeto de la matriz. Además, ¿cómo puedo calcular la suma total de ejercicios?
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: 'Redux', exercises: 11, id: 4 } ] }, { name: 'Node.js', id: 2, parts: [ { name: 'Routing', exercises: 3, id: 1 }, { name: 'Middlewares', exercises: 7, id: 2 } ] } ] // calculate total of exercises const totalExercises = course.reduce((total, course) => total + course.exercises, 0); return ( <div className="App"> <header className="App-header"> <h1>Seoul</h1> <Course course={course} totalExercises={totalExercises} /> </header> </div> ) } function Course({ course, totalExercises }) { return ( <> <ul> {course.map((course) => ( <li key={course.id}> <p>{course.name} {course.exercises}</p> <p>{course.parts[0].name}</p> <p>Total exercises: {course.parts[0].exercises},</p> <p>{course.parts[1].name}</p> <p>Total exercises: {course.parts[1].exercises}</p> // Undefined one below UNDEFINED <p>{course[0].parts[2].name}</p> </li> ))} </ul> </> ); }Podría usar mapear la matriz de partes a los elementos:
function Course({ course, totalExercises }) { return ( <> <ul> {course.map((course) => ( <li key={course.id}> <p>{course.name} {course.exercises}</p> { course.parts.map((part, id)=>( <React.Fragment key={id} <p>{part.name}</p> <p>Total Excercises: {part.exercises}</p> </React.Fragment> )) } </li> ))} </ul> </> ); }Intenta renderizar una matriz manualmente... es una mala idea imagine que su matriz es dinámica ¿cómo puede anticipar la cantidad de elementos en la matriz?
Hecho de la siguiente manera.
function Course({ course, totalExercises }) { return ( <> <ul> {course.map((course) => ( <li key={course.id}> <p>{course.name} {course.exercises}</p> {course.parts?.map((part, index) => ( <div key={index}> <p>{part.name}</p> <p>Total exercises: {part.exercises},</p> </div> ))} </li> ))} </ul> </> ); }Espero que mi inglés no te canse, soy francófono
function Course({ course, totalExercises }) { return ( <> <ul> {course.map((course) => ( <li key={course.id}> <p>{course.name} {course.exercises}</p> {course.parts.map((part,i) => { return( <div key={i}> <p>{part.name}</p> <p>Total exercises: {part.exercises},</p> </div> ) })} </li> ))} </ul> </> ); }De la misma manera que está mapeando el curso. mapa (... luego puede mapear las partes para cada curso, el código anterior funciona sin un error para mí.