Exercise 2.1

src/index.js

 import React from 'react'
 import ReactDOM from 'react-dom'
 
-const Header = (props) => {
+const Contents = ({ parts }) => {
     return (
-        <h1>{props.course.name}</h1>
+        parts.map(part =>
+            <Part key={part.id} name={part.name} exercises={part.exercises} />
+        )
     )
 }
 
-const Contents = (props) => {
+const Course = ({ course }) => {
     return (
         <div>
-            <Part name={props.parts[0].name} exercises={props.parts[0].exercises} />
-            <Part name={props.parts[1].name} exercises={props.parts[1].exercises} />
-            <Part name={props.parts[2].name} exercises={props.parts[2].exercises} />
+            <Header course={course.name} />
+            <Contents parts={course.parts} />
+            <Total parts={course.parts} />
         </div>
     )
 }
 
+const Header = ({ name }) => {
+    return (
+        <h1>{name}</h1>
+    )
+}
+
 const Part = (props) => {
     return (
         <p>{props.name} {props.exercises}</p>
     )
 }
 
-const Total = (props) => {
+const Total = ({ parts }) => {
+    let totalExercises = 0
+    parts.map(part =>
+        totalExercises += part.exercises
+    )
+
     return (
-        <p>Total {props.parts[0].exercises + props.parts[1].exercises + props.parts[2].exercises} exercises</p>
+        <p>Total {totalExercises}</p>
     )
 }
 
@@ -35,24 +48,25 @@ const App = () => {
         parts: [
             {
                 name: 'Basics of React',
-                exercises: 8
+                exercises: 8,
+                id: 1
             },
             {
                 name: 'Using props',
-                exercises: 10
+                exercises: 10,
+                id: 2
             },
             {
                 name: 'Component states',
-                exercises: 12
+                exercises: 12,
+                id: 3
             }
         ]
     }
 
     return (
         <div>
-            <Header course={course} />
-            <Contents parts={course.parts} />
-            <Total parts={course.parts} />
+            <Course course={course} />
         </div>
     )
 }