Estoy tratando de hacer un proyecto con React que pueda mostrar la tarea del curso en una lista de tareas pendientes. Actualmente tengo algunos datos de prueba, que se muestran aquí:
const courses = [ { courseName: "Fundies 2", classCode: "CS2510", startTime: "4:35 PM", location: "236 Richards Hall", color: "red", homework: [{ hwName: "HW3", timeDue: "8:30 PM" }] }, { courseName: "Mathematical Reasoning", classCode: "MATH1365", startTime: "10:20 AM", location: "235 Ryder Hall", color: "blue", homework: [ { hwName: "HW2", timeDue: "midnight" }, { hwName: "HW3", timeDue: "midnight" }, ] }, ];Hice una función para crear un componente a partir de estos datos, que se muestra a continuación.
const formattedCourses = courses.map((course) => { return ( <Task key={course.homework[1].hwName} timeDue={course.homework[1].timeDue} courseName={course.courseName} hwName={course.homework[1].hwName} color={course.color} /> ); });Quiero que el componente se haga con la primera entrada en la matriz de tareas. Sin embargo, cada vez que intento compilar, obtengo
"TypeError: no se pueden leer las propiedades de undefined (leyendo 'hwName')"
¿Cómo puedo arreglar esto?
¡Cualquier y toda ayuda es muy apreciada!
Su índice es incorrecto. Si desea la primera entrada, entonces debería ser 0 en lugar de 1
const formattedCourses = courses.map((course) => { return ( <Task key={course.homework[0].hwName} timeDue={course.homework[0].timeDue} courseName={course.courseName} hwName={course.homework[0].hwName} color={course.color} /> ); });