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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
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 courses = [
{
name: 'Half Stack application development',
id: 1,
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
},
{
name: 'Redux',
exercises: 11,
id: 4
}
]
},
{
name: 'Node.js',
id: 2,
parts: [
{
name: 'Routing',
exercises: 3,
id: 1
},
{
name: 'Middlewares',
exercises: 7,
id: 2
}
]
}
]
return (<>{courses.map( (course) => {
return <Course course={course} />
} )
}</>)
}
export default App
|
