From 80ddc7e3590e28d748582b0c5ca439588dd232a3 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Mon, 10 Jun 2019 15:40:24 -0700
Subject: [PATCH 1/3] app renders timeline component

---
 src/App.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.js b/src/App.js
index 5f4cdf8..fa90115 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,6 +15,7 @@ class App extends Component {
           <h1 className="App-title">Application title</h1>
         </header>
         <main className="App-main">
+          <Timeline />
         </main>
       </div>
     );

From 0e0948f18747c773f501bf57951e0453d78b8311 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Mon, 10 Jun 2019 15:51:53 -0700
Subject: [PATCH 2/3] 3 props included in timelineevent component

---
 src/components/TimelineEvent.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 9079165..cb39f12 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,9 +2,16 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  // Fill in your code here
-  return;
+const TimelineEvent = (props) => {
+  return (
+    <div className="TimelineEvent">
+      <header className="Student-header">
+        <p>{props.person}</p>
+        <p>{props.status}</p>
+        <p><Timestamp /></p>
+      </header>
+    </div>
+  );
 }
 
-export default TimelineEvent;
+export default TimelineEvent;
\ No newline at end of file

From 205049f0d2f682b55a144f0dff61fb1155680733 Mon Sep 17 00:00:00 2001
From: Jillianne Ramirez <jillianne.ramirez@gmail.com>
Date: Tue, 11 Jun 2019 10:44:58 -0700
Subject: [PATCH 3/3] functionality of props corrected

---
 src/App.js                      |  8 +++-----
 src/components/Timeline.js      | 20 ++++++++++++++++----
 src/components/TimelineEvent.js |  4 ++--
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index fa90115..141606d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,18 +4,16 @@ import timelineData from './data/timeline.json';
 
 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>
+          <h1 className="App-title"> {timelineData["person"]}s Timeline</h1>
         </header>
         <main className="App-main">
-          <Timeline />
+         <Timeline events={timelineData["events"]} />
         </main>
       </div>
     );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 624d4ec..063e088 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,21 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  // Fill in your code here
-  return;
+
+const timelineEventComponents = (events) => {
+  return events.map((post, i) => {
+      return (
+          <TimelineEvent key={i} person={ post.person } status={ post.status } timeStamp={ post.timeStamp } />
+          )
+      })
+}
+
+const Timeline = (props) => {
+  return (
+    <div className="Timeline">
+      { timelineEventComponents(props.events) }
+    </div>
+  );
 }
 
-export default Timeline;
+export default Timeline;
\ No newline at end of file
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index cb39f12..590c242 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -5,10 +5,10 @@ import Timestamp from './Timestamp';
 const TimelineEvent = (props) => {
   return (
     <div className="TimelineEvent">
-      <header className="Student-header">
+      <header className="Timeline-header">
         <p>{props.person}</p>
         <p>{props.status}</p>
-        <p><Timestamp /></p>
+        <p><Timestamp time={props.timeStamp}/></p>
       </header>
     </div>
   );