Im not really sure if the question is right but here is the problem:
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
}
]
}
]
The exercise here is to render this array, but it has to be in a way that more courses can be added later and from components. Here are my components that im trying to make:
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>}
I have the data i want in the map, but I just dont get how to make the indexes dynamic... Like in the map it would go through all of the arrays sub-parts and give the names and exercises
Like I mentioned in the comments, it sounds like what you are missing is the dynamic rendering of components based on an array of data. The primary issue is you need to update the Content component to actually render a Part for every item in the parts array. That would look something like this
I added a course component to handle rendering each individual course. Also updated the name of the prop to be course instead of parts as thats the more proper name
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) />) }
</>
)
}