63 lines
1.1 KiB
React
63 lines
1.1 KiB
React
|
const Header = (props) => {
|
||
|
|
return <h1>{props.course}</h1>
|
||
|
|
}
|
||
|
|
|
||
|
|
const Part = (props) => {
|
||
|
|
return <p>{props.partName} {props.exerciseCount}</p>
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
const Content = (props) => {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{props.sections.map((section) => {
|
||
|
|
return <Part partName={section.part} exerciseCount={section.exerciseCount}/>
|
||
|
|
})}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const Total = (props) => {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<p>Number of exercises {props.sections.reduce(
|
||
|
|
(sum, section) => {
|
||
|
|
return sum + section.exerciseCount
|
||
|
|
},
|
||
|
|
0
|
||
|
|
)}</p>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
const App = () => {
|
||
|
|
const course = {
|
||
|
|
name: 'Half Stack application development',
|
||
|
|
sections: [
|
||
|
|
{
|
||
|
|
part: 'Fundamentals of React',
|
||
|
|
exerciseCount: 10
|
||
|
|
},
|
||
|
|
{
|
||
|
|
part: 'Using props to pass data',
|
||
|
|
exerciseCount: 7
|
||
|
|
},
|
||
|
|
{
|
||
|
|
part: 'State of a component',
|
||
|
|
exerciseCount: 14
|
||
|
|
},
|
||
|
|
|
||
|
|
]
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<Header course={course.name}/>
|
||
|
|
<Content sections={course.sections}/>
|
||
|
|
<Total sections={course.sections}/>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default App
|