refactored

parts/2/courseExercise/src/App.jsx

@@ -1,26 +1,5 @@
-const Header = (props) => {
+import Header from "./components/Header";
-  return <h1>{props.course}</h1>;
+import Content from "./components/Content";
-};
-
-const Part = (props) => {
-  return (
-    <p>
-      {props.partName} {props.exerciseCount}
-    </p>
-  );
-};
-
-const Content = (props) => {
-  return (
-    <>
-      {props.sections.map((section) => {
-        return (
-          <Part partName={section.part} exerciseCount={section.exerciseCount} />
-        );
-      })}
-    </>
-  );
-};
 
 const App = () => {
   const course = {
@@ -38,6 +17,10 @@ const App = () => {
         part: "State of a component",
         exerciseCount: 14,
       },
+      {
+        part: "An extra part I added just like that",
+        exerciseCount: 1,
+      },
     ],
   };
 

parts/2/courseExercise/src/components/Content.jsx

@@ -0,0 +1,15 @@
+import Part from "./Part";
+
+const Content = (props) => {
+  return (
+    <>
+      {props.sections.map((section) => {
+        return (
+          <Part key={section.part} partName={section.part} exerciseCount={section.exerciseCount} />
+        );
+      })}
+    </>
+  );
+};
+
+export default Content;

parts/2/courseExercise/src/components/Header.jsx

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

parts/2/courseExercise/src/components/Part.jsx

@@ -0,0 +1,9 @@
+const Part = (props) => {
+  return (
+    <p>
+      {props.partName} {props.exerciseCount}
+    </p>
+  );
+};
+
+export default Part;