aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorIbrahim Mkusa <ibrahimmkusa@gmail.com>2023-04-23 19:49:10 -0400
committerIbrahim Mkusa <ibrahimmkusa@gmail.com>2023-04-23 19:49:10 -0400
commit269ab61b887718ac5820b7f50cd9de3682944a5d (patch)
treedf7dbd643416d28c483e93e3a2b5fd96ba6b4246
parentcd2ce52190a8bb33323fee3b20adcbb1faf032a8 (diff)
ex 1.5
-rw-r--r--part1/courseinfo/src/App.js53
1 files changed, 28 insertions, 25 deletions
diff --git a/part1/courseinfo/src/App.js b/part1/courseinfo/src/App.js
index a500c35..ad43367 100644
--- a/part1/courseinfo/src/App.js
+++ b/part1/courseinfo/src/App.js
@@ -1,13 +1,14 @@
const Header = (props) => {
+ const header = props.parts.name
return (
- <h1>{props.name}</h1>
+ <h1>{header}</h1>
)
}
const Content = (props) => {
- const object_1 = props.parts[0]
- const object_2 = props.parts[1]
- const object_3 = props.parts[2]
+ const object_1 = props.parts.parts[0]
+ const object_2 = props.parts.parts[1]
+ const object_3 = props.parts.parts[2]
return (
<p>
@@ -21,9 +22,9 @@ const Content = (props) => {
}
const Total = (props) => {
- const one = props.parts[0].exercises
- const two = props.parts[1].exercises
- const three = props.parts[2].exercises
+ 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>
@@ -31,27 +32,29 @@ const Total = (props) => {
}
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
- }
- ]
+ 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 name={course}/>
- <Content parts={parts} />
- <Total parts={parts} />
+ <Header parts={course}/>
+ <Content parts={course}/>
+ <Total parts={course}/>
</div>
)
}