diff options
author | Ibrahim Mkusa <ibrahimmkusa@gmail.com> | 2023-04-22 23:00:28 -0400 |
---|---|---|
committer | Ibrahim Mkusa <ibrahimmkusa@gmail.com> | 2023-04-22 23:00:28 -0400 |
commit | b6fab71b9c26b863a9862ed883f8a9b61af7a6fd (patch) | |
tree | ae9f586d5579a993f6e4aaa8ba93d041b279216c | |
parent | 864c74dd1ac16274694aee4c0d2f5b52cebef246 (diff) |
ex 1.3
-rw-r--r-- | part1/courseinfo/src/App.js | 31 |
1 files changed, 20 insertions, 11 deletions
diff --git a/part1/courseinfo/src/App.js b/part1/courseinfo/src/App.js index 35bb178..70f0e8b 100644 --- a/part1/courseinfo/src/App.js +++ b/part1/courseinfo/src/App.js @@ -5,9 +5,10 @@ const Header = (props) => { } const Part = (props) => { +//// props.part is an object containing name and exercises return ( <p> - {props.part} {props.desc} + {props.part.name} {props.part.exercises} </p> ) } @@ -20,20 +21,28 @@ const Total = (props) => { const App = () => { const course = 'Half Stack application development' - const part1 = 'Fundamentals of React' - const exercises1 = 10 - const part2 = 'Using props to pass data' - const exercises2 = 7 - const part3 = 'State of a component' - const exercises3 = 14 + 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 + } return ( <div> <Header name={course}/> - <Part part={part1} desc={exercises1} /> - <Part part={part2} desc={exercises2} /> - <Part part={part3} desc={exercises3} /> - <Total one={exercises1} two={exercises2} three={exercises3} /> + <Part part={part1} /> + <Part part={part2} /> + <Part part={part3} /> + <Total one={part1.exercises} two={part2.exercises} three={part3.exercises} /> </div> ) } |