Ports - Ari

src/App.js

@@ -3,18 +3,20 @@ import './App.css';
 import timelineData from './data/timeline.json';
 
 import Timeline from './components/Timeline';
+import TimelineEvent from './components/TimelineEvent';
 
 class App extends Component {
   render() {
-    console.log(timelineData);
-
+    // console.log(timelineData.events);
     // Customize the code below
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Application title</h1>
+          <h1 className="App-title">I Do Not Like This Sam I Am</h1>
         </header>
         <main className="App-main">
+          <Timeline 
+            events={timelineData.events}/>
         </main>
       </div>
     );

src/components/Timeline.js

@@ -2,9 +2,26 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  // Fill in your code here
-  return;
+
+const Timeline = (props) => {
+
+  const timelineComponents = props.events.map((timeline, i) => {
+    return (
+      <TimelineEvent
+        key={i}
+        person={timeline.person}
+        status={timeline.status}
+        timestamp={timeline.timeStamp}
+        />
+    )
+  });
+  return (
+    <section>
+      <ul>
+        {timelineComponents}
+      </ul>
+    </section>
+  )
 }
 
 export default Timeline;

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 (
+    <section>
+    <h3>
+      {props.person}
+    </h3>
+    <p>{props.status}</p>
+    <p> <Timestamp time={props.timestamp}/></p>
+  </section>
+  );
 }
 
 export default TimelineEvent;