overkill with custom component

parts/2/courseExercise/src/App.jsx

@@ -18,7 +18,7 @@ const App = () => {
       },
       {
         part: "An extra part I added just like that",
-        exerciseCount: 1,
+        exerciseCount: 3,
       },
     ],
   };

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

@@ -1,11 +1,13 @@
 import Header from "./Header";
 import Content from "./Content";
+import ExerciseCount from "./ExerciseCount";
 
 const Course = ({course}) => {
     return (
         <div>
           <Header course={course.name} />
           <Content sections={course.sections} />
+          <ExerciseCount sections={course.sections}/>
         </div>
       )
 }

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

@@ -0,0 +1,24 @@
+import InflectedUnitNumber from "./InflectedUnitNumber";
+
+const ExerciseCount = ({ sections }) => {
+  const exerciseCount = sections
+    .map((section) => section.exerciseCount)
+    .reduce((cumCount, sectionCount) => {
+      return cumCount + sectionCount;
+    }, 0);
+
+  return (
+    <p>
+      <b>
+        Total of{" "}
+        <InflectedUnitNumber
+          number={exerciseCount}
+          singular="exercise"
+          plural="exercises"
+        />
+      </b>
+    </p>
+  );
+};
+
+export default ExerciseCount;