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,8 +19,9 @@ const Total = (props) => (
 )
 
 const App = () => {
-  const course = 'Half Stack application development'
-  const parts = [
+  const course = {
+    name: 'Half Stack application development',
+    parts: [
       {
         name: 'Fundamentals of React',
         exercises: 10
@@ -34,12 +35,13 @@ const App = () => {
         exercises: 14
       }
     ]
+  }
 
   return (
     <div>
       <Header course={course} />
-      <Content parts={parts}/>
-      <Total total={parts} />
+      <Content parts={course.parts}/>
+      <Total parts={course.parts} />
     </div>
   )
 }