aboutsummaryrefslogtreecommitdiff
path: root/part1
diff options
context:
space:
mode:
authorIbrahim Mkusa <ibrahimmkusa@gmail.com>2023-04-23 19:39:26 -0400
committerIbrahim Mkusa <ibrahimmkusa@gmail.com>2023-04-23 19:39:26 -0400
commitcd2ce52190a8bb33323fee3b20adcbb1faf032a8 (patch)
tree77a6c40ecc31e6bbd488b378ac826939dc781fa8 /part1
parentb6fab71b9c26b863a9862ed883f8a9b61af7a6fd (diff)
ex 1.4
Diffstat (limited to 'part1')
-rw-r--r--part1/courseinfo/src/App.js53
1 files changed, 31 insertions, 22 deletions
diff --git a/part1/courseinfo/src/App.js b/part1/courseinfo/src/App.js
index 70f0e8b..a500c35 100644
--- a/part1/courseinfo/src/App.js
+++ b/part1/courseinfo/src/App.js
@@ -4,45 +4,54 @@ const Header = (props) => {
)
}
-const Part = (props) => {
-//// props.part is an object containing name and exercises
+const Content = (props) => {
+ const object_1 = props.parts[0]
+ const object_2 = props.parts[1]
+ const object_3 = props.parts[2]
+
return (
<p>
- {props.part.name} {props.part.exercises}
+ {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 {props.one + props.two + props.three}</p>
+ <p>Number of exercises {one + two + three}</p>
)
}
const App = () => {
const course = 'Half Stack application development'
- const part1 = {
- name: 'Fundamentals of React',
- exercises: 10
- }
-
- const part2 = {
- name: 'Using props to pass data',
- exercises: 7
- }
-
- const part3 = {
- name: 'State of a component',
- exercises: 14
- }
+ 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}/>
- <Part part={part1} />
- <Part part={part2} />
- <Part part={part3} />
- <Total one={part1.exercises} two={part2.exercises} three={part3.exercises} />
+ <Content parts={parts} />
+ <Total parts={parts} />
</div>
)
}