From bbcea9fd36e8ab6c4750879c989a5fc8c17217a1 Mon Sep 17 00:00:00 2001
From: Anish Lakhwara <anish+git@lakhwara.com>
Date: Sat, 29 Apr 2023 14:23:10 +1000
Subject: [PATCH] exercise 1.4

---
 part1/src/App.js | 36 ++++++++++++++++++++++--------------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/part1/src/App.js b/part1/src/App.js
index f1ded94..2bbce39 100644
--- a/part1/src/App.js
+++ b/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>
 	)
 }