blob: a4647ece78020946b9fb239836fdf6dc9b30dbfe (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
const Header = (props) => {
const header = props.name
return (
<h1>{header}</h1>
)
}
const Part = (props) => {
const name = props.name
const exercises = props.exercises
return (
<p>{name} {exercises}</p>
)
}
const Content = (props) => {
//const object_1 = props.parts.parts[0]
//const object_2 = props.parts.parts[1]
//const object_3 = props.parts.parts[2]
const parts = props.parts
return (
<>
{parts.map((part) => {
return (
<Part name={part.name} exercises={part.exercises} />
)})
}
</>
)
}
const Total = (props) => {
const parts = props.parts
const initialValue = 0
return (<p> Number of exercises {parts.reduce((sum, part) => {
return sum += part.exercises
}, initialValue)} </p>
)
}
const Course = (props) => {
const header = props.course.name
const parts = props.course.parts
return (
<>
<Header name={header} />
<Content parts={parts} />
<Total parts={parts} />
</>
)
}
const App = () => {
const course = {
id: 1,
name: 'Half Stack application development',
parts: [
{
name: 'Fundamentals of React',
exercises: 10,
id: 1
},
{
name: 'Using props to pass data',
exercises: 7,
id: 2
},
{
name: 'State of a component',
exercises: 14,
id: 3
}
]
}
return <Course course={course} />
}
export default App
|
