exercise 1.4

part1/src/App.js

@@ -7,10 +7,11 @@ const Header = (props) => {
 }
 
 const Part = (props) => {
+	console.log(props)
 	return (
 		<>
 			<p>
-				{props.part} {props.exercise}
+				{props.part.name} {props.part.exercises}
 			</p>
 		</>
 	)
@@ -19,18 +20,19 @@ const Part = (props) => {
 const Content = (props) => {
 	return (
 		<>
-			<Part part={props.part1} exercise={props.exercises1} />
-			<Part part={props.part2} exercise={props.exercises2} />
-			<Part part={props.part3} exercise={props.exercises3} />
+			<Part part={props.parts[0]} />
+			<Part part={props.parts[1]} />
+			<Part part={props.parts[2]} />
 		</>
 	)
 }
 
 const Total = (props) => {
+	const total = props.parts[0].exercises + props.parts[1].exercises + props.parts[2].exercises
 	return (
 		<>
 			<p>
-				Number of exercises {props.total}
+				Number of exercises {total}
 			</p>
 		</>
 	)
@@ -38,19 +40,25 @@ const Total = (props) => {
 
 const App = () => {
 	const course = 'Half Stack application development'
-	const part1 = 'Fundamentals of React'
-	const exercises1 = 10
-	const part2 = 'Using props to pass data'
-	const exercises2 = 7
-	const part3 = 'State of a component'
-	const exercises3 = 14
-	const total = exercises3 + exercises2 + exercises1
+	const part1 = {
+		name: 'Fundamentals of React',
+		exercises: 10
+	}
+	const part2 = {
+		name: 'Using props to pass data',
+		exercises: 7
+	}
+	const part3 = {
+		name: 'State of a component',
+		exercises: 14
+	}
+	const parts = [part1, part2, part3]
 
 	return (
 		<div>
 			<Header course={course} />
-			<Content part1={part1} part2={part2} part3={part3} exercises1={exercises1} exercises2={exercises2} exercises3={exercises3} />
-			<Total total={total} />
+			<Content parts={parts} />
+			<Total parts={parts} />
 		</div>
 	)
 }