Completed 2.1

part2/2.1-2.5/src/App.js

@@ -2,28 +2,36 @@ import React from 'react'
 
 const App = () => {
   const course = {
+    id: 1,
     name: 'Half Stack application development',
     parts: [
       {
         name: 'Fundamentals of React',
-        exercises: 10
+        exercises: 10,
+        id: 1
       },
       {
         name: 'Using props to pass data',
-        exercises: 7
+        exercises: 7,
+        id: 2
       },
       {
         name: 'State of a component',
-        exercises: 14
+        exercises: 14,
+        id: 3
       }
     ]
   }
 
+  return <Course course={course} />
+}
+ 
+const Course = ({course}) => {
   return (
     <div>
       <Header course={course} />
       <Content part={course.parts} />
-      <Total part={course.parts} />
+      {/*<Total part={course.parts} >*/}
     </div>
   )
 }
@@ -35,11 +43,12 @@ const Header = (props) => {
 }
 
 const Content = (props) => {
+  //console.log(props)
   return (
     <div>
-      <Part part={props.part[0]} />
-      <Part part={props.part[1]} />
-      <Part part={props.part[2]} />
+       {props.part.map(part => 
+          <Part key={part.id} part={part} />
+        )}
     </div>
    
   )
@@ -51,10 +60,10 @@ const Part = (props) => {
   )
 }
 
-const Total = (props) => {
+/*const Total = (props) => {
   return (
     <p>Number of exercises {props.part[0].exercises + props.part[1].exercises + props.part[2].exercises}</p>
   )
-}
+}*/
 
 export default App