I’m working through the Fullstack Open MOOC course from the University of Helsinki and I’m currently stuck on exercise 1.3
I have a collection of objects that contain a course name and the number of exercises for that associated course. I need to pass down these objects into the Content component so that each course name and exercises render on the page. I’ve coded it up like so:
const Part = (props) => {
console.log("propsPart: ", props)
return(
<>
<p>{props.name} {props.exercises}</p>
</>
)
}
const Content = (props) => {
console.log("propsContent: ", props)
return(
<>
<Part {...props}/>
<Part {...props}/>
<Part {...props}/>
</>
)
}
const App = () => {
const course = 'Half Stack application development'
const part1 = {
name: 'Fundamentals of React',
exercises: 10
}
const part2 = {
name: 'Using props to pass data',
exercises: 7
}
const part3 = {
name: 'State of a component',
exercises: 14
}
return (
<div>
<Header course={course}/>
<Content {...part1} />
</div>
)
}
I don’t understand how to pass in multiple objects into the Content component. Can someone tell me what’s missing from the Content component and how to structure it so it accepts multiple props?