Exercise 1.3

part1/courseinfo/src/App.js

@@ -8,9 +8,9 @@ const Part = (props) => (
 
 const Content = (props) => (
   <div>
-  <Part part={props.part1} exercise={props.exercise1} />
-  <Part part={props.part2} exercise={props.exercise2} />
-  <Part part={props.part3} exercise={props.exercise3} />
+  <Part part={props.part1.name} exercise={props.part1.exercises} />
+  <Part part={props.part2.name} exercise={props.part2.exercises} />
+  <Part part={props.part3.name} exercise={props.part3.exercises} />
   </div>
 )
 
@@ -20,18 +20,24 @@ 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 course={course} />
-      <Content part1={part1} part2={part2} part3={part3} exercise1={exercises1} exercise2={exercises2} exercises3={exercises3} />
-      <Total total={exercises1 + exercises2 + exercises3} />
+      <Content part1={part1} part2={part2} part3={part3}/>
+      <Total total={part1.exercises + part2.exercises + part3.exercises} />
     </div>
   )
 }