No estoy muy seguro de si la pregunta es correcta, pero aquí está el problema:
const course = [ { name: 'Half Stack application development', id: 1, parts: [ { name: 'Fundamentals of React', exercises: 10, id: 1 }, { 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 } ] }]
El ejercicio aquí es renderizar esta matriz, pero tiene que ser de manera que se puedan agregar más cursos más tarde y desde componentes. Aquí están mis componentes que estoy tratando de hacer:
const Content = (props) => { return( props.parts.map(part => { console.log(part.parts,'part', part.id) }) ) } const Part = (props) =>{ console.log(props) return <div> {props.part.name} </div>}Tengo los datos que quiero en el mapa, pero simplemente no entiendo cómo hacer que los índices sean dinámicos... Al igual que en el mapa, pasaría por todas las subpartes de matrices y daría los nombres y ejercicios.
Como mencioné en los comentarios, parece que lo que te estás perdiendo es la representación dinámica de componentes basada en una matriz de datos. El problema principal es que debe actualizar el componente de Content para representar realmente una Part para cada elemento en la matriz de partes. Eso se vería algo como esto
Agregué un componente de curso para manejar la representación de cada curso individual. También se actualizó el nombre del accesorio para que sea un curso en lugar de partes, ya que ese es el nombre más propio.
const Course = ({course}) => { return ( <article> <header> <h1>{course.name}</h1> </header> <section> { course.parts.map(part => <Part key={part.id} part={part) />) } </section> </article> ) } const Content = ({courses}) => { return ( <> { courses.map(course => <Course key={course.id} course={course) />) } </> ) }