exercise 2.4

part2/src/App.js

@@ -15,53 +15,74 @@ const Content = ({ parts }) => {
 }
 
 const Sum = ({ parts }) => {
-	// Already used reduce :3
 	const total = parts.reduce((acc, currVal) => acc + currVal.exercises, 0)
 	return (
 		<b>The total number of execrcises is {total}</b>
 	)
 }
 
-const Course = ({ course }) => {
+const Course = ({ courses }) => {
 	return (
 		<>
-			<Header content={course.name} />
+			{courses.map(course =>
-			<Content parts={course.parts} />
+				<>
-			<Sum parts={course.parts} />
+					<Header content={course.name} />
+					<Content parts={course.parts} />
+					<Sum parts={course.parts} />
+				</>
+			)}
 		</>
 	)
 
 }
 
 function App() {
-	const course = {
+	const courses = [
-		id: 1,
+		{
-		name: 'Half Stack application development',
+			name: 'Half Stack application development',
-		parts: [
+			id: 1,
-			{
+			parts: [
-				name: 'Fundamentals of React',
+				{
-				exercises: 10,
+					name: 'Fundamentals of React',
-				id: 1
+					exercises: 10,
-			},
+					id: 1
-			{
+				},
-				name: 'Using props to pass data',
+				{
-				exercises: 7,
+					name: 'Using props to pass data',
-				id: 2
+					exercises: 7,
-			},
+					id: 2
-			{
+				},
-				name: 'State of a component',
+				{
-				exercises: 14,
+					name: 'State of a component',
-				id: 3
+					exercises: 14,
-			},
+					id: 3
-			{
+				},
-				name: 'Redux',
+				{
-				exercises: 11,
+					name: 'Redux',
-				id: 4
+					exercises: 11,
-			}
+					id: 4
-		]
+				}
-	}
+			]
+		},
+		{
+			name: 'Node.js',
+			id: 2,
+			parts: [
+				{
+					name: 'Routing',
+					exercises: 3,
+					id: 1
+				},
+				{
+					name: 'Middlewares',
+					exercises: 7,
+					id: 2
+				}
+			]
+		}
+	]
 
-	return <Course course={course} />
+	return <Course courses={courses} />
 }
 
 export default App;