cleaning day_5

05_Day_Props/30-days-of-react_boilerplate-props/src/index.js

@@ -68,8 +68,12 @@ const UserCard = ({ user: { firstName, lastName, image } }) => (
   </div>
 )
 
+// A button component
+
+const Button = ({ text, onClick }) => <button onClick={onClick}>{text}</button>
+
 // Main Component
-const Main = ({ user, techs }) => (
+const Main = ({ user, techs, greetPeople, handleTime }) => (
   <main>
     <div className='main-wrapper'>
       <p>Prerequisite to get started react.js:</p>
@@ -77,6 +81,8 @@ const Main = ({ user, techs }) => (
         <TechList techs={techs} />
       </ul>
       <UserCard user={user} />
+      <Button text='Greet People' onClick={greetPeople} />
+      <Button text='Show Time' onClick={handleTime} />
     </div>
   </main>
 )
@@ -101,17 +107,29 @@ const App = () => {
       firstName: 'Asabeneh',
       lastName: 'Yetayeh',
     },
-    date: new Date(),
+    date: new Date(), // date needs to be formatted to a human readable format
   }
   const date = new Date()
   const techs = ['HTML', 'CSS', 'JavaScript']
   // copying the author from data object to user variable using spread operator
   const user = { ...data.author, image: asabenehImage }
 
+  const handleTime = () => {
+    alert(showDate(new Date()))
+  }
+  const greetPeople = () => {
+    alert('Welcome to 30 Days Of React Challenge, 2020')
+  }
+
   return (
     <div className='app'>
       <Header data={data} />
-      <Main user={user} techs={techs} />
+      <Main
+        user={user}
+        techs={techs}
+        handleTime={handleTime}
+        greetPeople={greetPeople}
+      />
       <Footer copyRight={date} />
     </div>
   )