blob: ad4336764647990062a40b58f24353d3d81d56ea (
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
|
const Header = (props) => {
const header = props.parts.name
return (
<h1>{header}</h1>
)
}
const Content = (props) => {
const object_1 = props.parts.parts[0]
const object_2 = props.parts.parts[1]
const object_3 = props.parts.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.parts[0].exercises
const two = props.parts.parts[1].exercises
const three = props.parts.parts[2].exercises
return (
<p>Number of exercises {one + two + three}</p>
)
}
const App = () => {
const course = {
name: 'Half Stack application development',
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 parts={course}/>
<Content parts={course}/>
<Total parts={course}/>
</div>
)
}
export default App
|
