2.4 handles multiple course components

1 files changed, 56 insertions, 19 deletions

diff --git a/part2/courseinfo2/src/App.js b/part2/courseinfo2/src/App.js
index a4647ec..720ea29 100644
--- a/part2/courseinfo2/src/App.js
+++ b/part2/courseinfo2/src/App.js
@@ -55,29 +55,66 @@ const Course = (props) => {
 }
 
 const App = () => {
-  const course = {
-    id: 1,
-    name: 'Half Stack application development',
+  const courses = [
+  {
+          name: 'Half Stack application development',
+          id: 1,
     parts: [
       {
-        name: 'Fundamentals of React',
-        exercises: 10,
-        id: 1
+                  name: 'Fundamentals of React',
+                  exercises: 10,
+                  id: 1
+                
       },
-      {
-        name: 'Using props to pass data',
-        exercises: 7,
-        id: 2
-      },
-      {
-        name: 'State of a component',
-        exercises: 14,
-        id: 3
-      }
+    {
+                name: 'Using props to pass data',
+                exercises: 7,
+                id: 2
+              
+    },
+    {
+                name: 'State of a component',
+                exercises: 14,
+                id: 3
+              
+    },
+    {
+                name: 'Redux',
+                exercises: 11,
+                id: 4
+              
+    }
+          
     ]
-  }
-
-  return <Course course={course} />
+        
+  }, 
+    {
+            name: 'Node.js',
+            id: 2,
+      parts: [
+        {
+                    name: 'Routing',
+                    exercises: 3,
+                    id: 1
+                  
+        },
+        {
+                    name: 'Middlewares',
+                    exercises: 7,
+                    id: 2
+                  
+        }
+              
+      ]
+          
+    }
+      
+  ]
+  
+  return (<>{courses.map( (course) => {
+      return <Course course={course} />
+    } )
+    }</>)  
 }
 
 export default App