Add exercise course information, step 2

part1/courseinfo/src/App.jsx

@@ -4,16 +4,26 @@ function Header(props) {
 
 function Content(props) {
 	return (
-		<p>
-			{props.part} {props.exercises}
-		</p>
+		<div>
+			<Part part={props.part1} exercises={props.exercises1} />
+			<Part part={props.part2} exercises={props.exercises2} />
+			<Part part={props.part3} exercises={props.exercises3} />
+		</div>
 	);
 }
 
 function Total(props) {
 	return <p>Number of exercises {props.exercises1 + props.exercises2 + props.exercises3}</p>;
 }
 
+function Part(props) {
+	return (
+		<p>
+			{props.part} {props.exercises}
+		</p>
+	);
+}
+
 function App() {
 	const course = "Half Stack application development";
 	const part1 = "Fundamentals of React";
@@ -26,9 +36,14 @@ function App() {
 	return (
 		<div>
 			<Header course={course} />
-			<Content part={part1} exercises={exercises1} />
-			<Content part={part2} exercises={exercises2} />
-			<Content part={part3} exercises={exercises3} />
+			<Content
+				part1={part1}
+				exercises1={exercises1}
+				part2={part2}
+				exercises2={exercises2}
+				part3={part3}
+				exercises3={exercises3}
+			/>
 			<Total exercises1={exercises1} exercises2={exercises2} exercises3={exercises3} />
 		</div>
 	);