From 63a46d50fcbd53bbc8a8040e25ce2303c7e0a7ff Mon Sep 17 00:00:00 2001
From: Shamira <marshallscm@gmail.com>
Date: Tue, 11 Jun 2019 10:48:14 -0700
Subject: [PATCH] timeline

---
 src/App.js                      |  6 +++---
 src/components/Timeline.js      | 21 ++++++++++++++++++---
 src/components/TimelineEvent.js | 11 ++++++++---
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5f4cdf8..bfef1c7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,15 +6,15 @@ import Timeline from './components/Timeline';
 
 class App extends Component {
   render() {
-    console.log(timelineData);
-
-    // Customize the code below
+   
     return (
       <div className="App">
         <header className="App-header">
           <h1 className="App-title">Application title</h1>
         </header>
         <main className="App-main">
+          <Timeline
+            events={timelineData.events}/>
         </main>
       </div>
     );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 624d4ec..aa8dbbf 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,24 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  // Fill in your code here
-  return;
+const Timeline = (props) => {
+  const timelineObjects = props.events.map((timeline, i) => {
+    return (
+      <TimelineEvent
+      key={i}
+      person={timeline.person}
+      status={timeline.status}
+      tiemstamp={timeline.timestamp}
+      />
+    )
+  });
+  return (
+    <section>
+    <ul>
+    {timelineObjects}
+    </ul>
+    </section>
+  )
 }
 
 export default Timeline;
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 9079165..70165d8 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,9 +2,14 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  // Fill in your code here
-  return;
+const TimelineEvent = (props) => {
+  return (
+  <section>
+    <h3>{props.person}</h3>
+    <h4>{props.status}</h4>
+    <p><Timestamp time={props.timestamp}/></p>
+  </section>
+  );
 }
 
 export default TimelineEvent;