58 lines
1 KiB
React
58 lines
1 KiB
React
|
const Header = (props) => {
|
||
|
|
return <h1>{props.course}</h1>
|
||
|
|
}
|
||
|
|
|
||
|
|
const Content = (props) => {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{props.sections.map((section) => {
|
||
|
|
return <p>{section.part} {section.exerciseCount}</p>
|
||
|
|
})}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const Total = (props) => {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<p>Number of exercises {props.totalExerciseCount}</p>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
const App = () => {
|
||
|
|
const course = 'Half Stack application development'
|
||
|
|
const part1 = 'Fundamentals of React'
|
||
|
|
const exercises1 = 10
|
||
|
|
const part2 = 'Using props to pass data'
|
||
|
|
const exercises2 = 7
|
||
|
|
const part3 = 'State of a component'
|
||
|
|
const exercises3 = 14
|
||
|
|
|
||
|
|
const sections = [
|
||
|
|
{
|
||
|
|
part: part1,
|
||
|
|
exerciseCount: exercises1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
part: part2,
|
||
|
|
exerciseCount: exercises2
|
||
|
|
},
|
||
|
|
{
|
||
|
|
part: part3,
|
||
|
|
exerciseCount: exercises3
|
||
|
|
},
|
||
|
|
|
||
|
|
]
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<Header course={course}/>
|
||
|
|
<Content sections={sections}/>
|
||
|
|
<Total totalExerciseCount={exercises1 + exercises2 + exercises3}/>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default App
|