Exercise 1.4

src/index.js

@@ -10,9 +10,9 @@ const Header = (props) => {
 const Contents = (props) => {
     return (
         <div>
-            <Part name={props.name1} exercises={props.exercises1} />
-            <Part name={props.name2} exercises={props.exercises2} />
-            <Part name={props.name3} exercises={props.exercises3} />
+            <Part name={props.parts[0].name} exercises={props.parts[0].exercises} />
+            <Part name={props.parts[1].name} exercises={props.parts[1].exercises} />
+            <Part name={props.parts[2].name} exercises={props.parts[2].exercises} />
         </div>
     )
 }
@@ -25,32 +25,31 @@ const Part = (props) => {
 
 const Total = (props) => {
     return (
-        <p>Total {props.total} exercises</p>
+        <p>Total {props.parts[0].exercises + props.parts[1].exercises + props.parts[2].exercises} exercises</p>
     )
 }
 
 const App = () => {
     const course = 'Superadvanced web and mobile programming'
-    const part1 = {
+    const parts = [
+        {
             name: 'Basics of React',
             exercises: 8
-    }
-    const part2 = {
+        },
+        {
             name: 'Using props',
             exercises: 10
-    }
-    const part3 = {
+        },
+        {
             name: 'Component states',
             exercises: 12
         }
-
+    ]
     return (
         <div>
             <Header course={course} />
-            <Contents name1={part1.name} exercises1={part1.exercises}
-                      name2={part2.name} exercises2={part2.exercises}
-                      name3={part3.name} exercises3={part3.exercises}/>
-            <Total total={part1.exercises + part2.exercises + part3.exercises} />
+            <Contents parts={parts} />
+            <Total parts={parts} />
       </div>
     )
 }