From a0b8dc6005af538f37a36d6069224b52ac9d060f Mon Sep 17 00:00:00 2001
From: Ibrahim Mkusa <ibrahimmkusa@gmail.com>
Date: Thu, 27 Apr 2023 22:29:42 -0400
Subject: ex2.1 Array.map to display unlimited components

---
 part2/courseinfo2/src/App.js   | 81 ++++++++++++++++++++++++++++++++++++++++++
 part2/courseinfo2/src/index.js |  6 ++++
 2 files changed, 87 insertions(+)
 create mode 100644 part2/courseinfo2/src/App.js
 create mode 100644 part2/courseinfo2/src/index.js

(limited to 'part2/courseinfo2/src')

diff --git a/part2/courseinfo2/src/App.js b/part2/courseinfo2/src/App.js
new file mode 100644
index 0000000..f1bc1ef
--- /dev/null
+++ b/part2/courseinfo2/src/App.js
@@ -0,0 +1,81 @@
+const Header = (props) => {
+  const header = props.name
+  return (
+    <h1>{header}</h1>
+  )
+}
+
+const Part = (props) => {
+  const name = props.name
+  const exercises = props.exercises
+
+  return (
+    <p>{name} {exercises}</p>
+  )
+}
+
+const Content = (props) => {
+  //const object_1 = props.parts.parts[0]
+  //const object_2 = props.parts.parts[1]
+  //const object_3 = props.parts.parts[2]
+  const parts = props.parts
+
+  return (
+    <>
+      {parts.map((part) => {
+        return (
+          <Part name={part.name} exercises={part.exercises} />
+      )})
+      }
+    </>
+  )
+}
+
+const Total = (props) => {
+  const one = props.parts.parts[0].exercises
+  const two = props.parts.parts[1].exercises
+  const three = props.parts.parts[2].exercises
+
+  return (
+    <p>Number of exercises {one + two + three}</p>
+  )
+}
+
+const Course = (props) => {
+  const header = props.course.name
+  const parts = props.course.parts
+  return (
+    <>
+    <Header name={header} />
+     <Content parts={parts} />
+    </>
+  )
+}
+
+const App = () => {
+  const course = {
+    id: 1,
+    name: 'Half Stack application development',
+    parts: [
+      {
+        name: 'Fundamentals of React',
+        exercises: 10,
+        id: 1
+      },
+      {
+        name: 'Using props to pass data',
+        exercises: 7,
+        id: 2
+      },
+      {
+        name: 'State of a component',
+        exercises: 14,
+        id: 3
+      }
+    ]
+  }
+
+  return <Course course={course} />
+}
+
+export default App
diff --git a/part2/courseinfo2/src/index.js b/part2/courseinfo2/src/index.js
new file mode 100644
index 0000000..a9e69b3
--- /dev/null
+++ b/part2/courseinfo2/src/index.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);
-- 
cgit v1.2.3