blob: a500c359c01ad658a2d2ea57f428c5b9b16ca377 (
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
|
const Header = (props) => {
return (
<h1>{props.name}</h1>
)
}
const Content = (props) => {
const object_1 = props.parts[0]
const object_2 = props.parts[1]
const object_3 = props.parts[2]
return (
<p>
{object_1.name} {object_1.exercises}
<br />
{object_2.name} {object_2.exercises}
<br />
{object_3.name} {object_3.exercises}
</p>
)
}
const Total = (props) => {
const one = props.parts[0].exercises
const two = props.parts[1].exercises
const three = props.parts[2].exercises
return (
<p>Number of exercises {one + two + three}</p>
)
}
const App = () => {
const course = 'Half Stack application development'
const parts = [
{
name: 'Fundamentals of React',
exercises: 10
},
{
name: 'Using props to pass data',
exercises: 7
},
{
name: 'State of a component',
exercises: 14
}
]
return (
<div>
<Header name={course}/>
<Content parts={parts} />
<Total parts={parts} />
</div>
)
}
export default App
|
