exercise 2.5

part2/src/App.js

@@ -1,40 +1,4 @@
-const Header = ({ content }) => {
-	return (<h1>{content}</h1>)
-}
-
-const Content = ({ parts }) => {
-	return (
-		<>
-			{parts.map(part =>
-				<p key={part.id}>
-					{part.name} Exercises {part.exercises}
-				</p>)
-			}
-		</>
-	)
-}
-
-const Sum = ({ parts }) => {
-	const total = parts.reduce((acc, currVal) => acc + currVal.exercises, 0)
-	return (
-		<b>The total number of execrcises is {total}</b>
-	)
-}
-
-const Course = ({ courses }) => {
-	return (
-		<>
-			{courses.map(course =>
-				<>
-					<Header content={course.name} />
-					<Content parts={course.parts} />
-					<Sum parts={course.parts} />
-				</>
-			)}
-		</>
-	)
-
-}
+import Course from './components/Course'
 
 function App() {
 	const courses = [

part2/src/components/Content.js

@@ -0,0 +1,14 @@
+const Content = ({ parts }) => {
+	return (
+		<>
+			{parts.map(part =>
+				<p key={part.id}>
+					{part.name} Exercises {part.exercises}
+				</p>)
+			}
+		</>
+	)
+}
+
+
+export default Content;

part2/src/components/Course.js

@@ -0,0 +1,19 @@
+import Content from './Content'
+import Header from './Header'
+import Sum from './Sum'
+
+const Course = ({ courses }) => {
+	return (
+		<>
+			{courses.map(course =>
+				<>
+					<Header content={course.name} />
+					<Content parts={course.parts} />
+					<Sum parts={course.parts} />
+				</>
+			)}
+		</>
+	)
+}
+
+export default Course;

part2/src/components/Header.js

@@ -0,0 +1,5 @@
+const Header = ({ content }) => {
+	return (<h1>{content}</h1>)
+}
+
+export default Header;

part2/src/components/Sum.js

@@ -0,0 +1,8 @@
+const Sum = ({ parts }) => {
+	const total = parts.reduce((acc, currVal) => acc + currVal.exercises, 0)
+	return (
+		<b>The total number of execrcises is {total}</b>
+	)
+}
+
+export default Sum;