Create a React component to utilize other React Components - reactjs

Question

from an array inside an object and renders it to the browser. The App uses a number of small components Header, Contents and Total to function.
Next part of exercise is to create a single component 'Course' to do the same job as all the smaller components(Header,Contents,Total)
Here is original app that gives this output:
Half Stack application development
Fundamentals of React10
Number of exercises is 31
import React from 'react'
const Header = (props) => {
return (
<div>
<h1>{props.course}</h1>
</div>
)
}
const Content = (props) => {
return (
<div>
<p>{props.part1}</p>
</div>
)
}
const Part = (props) => {
return (
<div>
<p>{props.part1} {props.exercises1}</p>
</div>
)
}
const Total = (props) => {
return (
<div>
<p>Number of exercises is {props.total}</p>
</div>
)
}
const App = () => {
const course = {
name: 'Half Stack application development',
parts: [
{
name: 'Fundamentals of React',
exercises: 10
},
{
name: 'Using props to pass data',
exercises: 7
},
{
name: 'State of a component',
exercises: 14
}
]
}
return (
<div>
<Header course={course.name} />
<Content part1 = {course.parts[0].name + course.parts[0].exercises} />
<Total total = {course.parts[0].exercises + course.parts[1].exercises + course.parts[2].exercises} />
</div>
)
}
export default App
And here is the new component I created which is giving me a blank output, no errors reported
const Course = (props) => {
return (
<div>
<Header></Header>
<Content></Content>
<Total></Total>
</div>
)
}
With updated App
onst App = () => {
const course = {
name: 'Half Stack application development',
parts: [
{
name: 'Fundamentals of React',
exercises: 10
},
{
name: 'Using props to pass data',
exercises: 7
},
{
name: 'State of a component',
exercises: 14
}
]
}
return <Course course={course} />
}
export default App