diff options
author | Ibrahim Mkusa <ibrahimmkusa@gmail.com> | 2023-04-23 19:49:10 -0400 |
---|---|---|
committer | Ibrahim Mkusa <ibrahimmkusa@gmail.com> | 2023-04-23 19:49:10 -0400 |
commit | 269ab61b887718ac5820b7f50cd9de3682944a5d (patch) | |
tree | df7dbd643416d28c483e93e3a2b5fd96ba6b4246 | |
parent | cd2ce52190a8bb33323fee3b20adcbb1faf032a8 (diff) |
ex 1.5
-rw-r--r-- | part1/courseinfo/src/App.js | 53 |
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> ) } |