Skip to content
Snippets Groups Projects
Commit 304a1f6e authored by Roy Grönroos's avatar Roy Grönroos
Browse files

Exercise 2.1

parent dc63457a
No related branches found
No related tags found
No related merge requests found
import React from 'react'
import ReactDOM from 'react-dom'
const Header = (props) => {
const Contents = ({ parts }) => {
return (
<h1>{props.course.name}</h1>
parts.map(part =>
<Part key={part.id} name={part.name} exercises={part.exercises} />
)
)
}
const Contents = (props) => {
const Course = ({ course }) => {
return (
<div>
<Part name={props.parts[0].name} exercises={props.parts[0].exercises} />
<Part name={props.parts[1].name} exercises={props.parts[1].exercises} />
<Part name={props.parts[2].name} exercises={props.parts[2].exercises} />
<Header course={course.name} />
<Contents parts={course.parts} />
<Total parts={course.parts} />
</div>
)
}
const Header = ({ name }) => {
return (
<h1>{name}</h1>
)
}
const Part = (props) => {
return (
<p>{props.name} {props.exercises}</p>
)
}
const Total = (props) => {
const Total = ({ parts }) => {
let totalExercises = 0
parts.map(part =>
totalExercises += part.exercises
)
return (
<p>Total {props.parts[0].exercises + props.parts[1].exercises + props.parts[2].exercises} exercises</p>
<p>Total {totalExercises}</p>
)
}
......@@ -35,24 +48,25 @@ const App = () => {
parts: [
{
name: 'Basics of React',
exercises: 8
exercises: 8,
id: 1
},
{
name: 'Using props',
exercises: 10
exercises: 10,
id: 2
},
{
name: 'Component states',
exercises: 12
exercises: 12,
id: 3
}
]
}
return (
<div>
<Header course={course} />
<Contents parts={course.parts} />
<Total parts={course.parts} />
<Course course={course} />
</div>
)
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment