Exercise 1.5

part1/courseinfo/src/App.js

@@ -1,16 +1,16 @@
 const Header = (props) => (
-  <h1>{props.course}</h1>
+  <h1>{props.course.name}</h1>
 )
 
 const Part = (props) => (
-  <p>{props.part} {props.exercise}</p>
+  <p>{props.part.name} {props.part.exercises}</p>
 )
 
 const Content = (props) => (
   <div>
-  <Part part={props.parts[0].name} exercise={props.parts[0].exercises} />
-  <Part part={props.parts[1].name} exercise={props.parts[1].exercises} />
-  <Part part={props.parts[2].name} exercise={props.parts[2].exercises} />
+  <Part part={props.parts[0]} />
+  <Part part={props.parts[1]} />
+  <Part part={props.parts[2]} />
   </div>
 )
 
@@ -19,27 +19,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 course={course} />
-      <Content parts={parts}/>
-      <Total total={parts} />
+      <Content parts={course.parts}/>
+      <Total parts={course.parts} />
     </div>
   )
 }