Ports - Angela

src/App.css

@@ -15,3 +15,7 @@
   padding-top: 7rem;
   background-color: #E6ECF0;
 }
+
+ul {
+  list-style: none;
+}

src/App.js

@@ -1,20 +1,28 @@
 import React, { Component } from 'react';
 import './App.css';
 import timelineData from './data/timeline.json';
-
 import Timeline from './components/Timeline';
 
 class App extends Component {
   render() {
-    console.log(timelineData);
 
-    // Customize the code below
+    const postingData = timelineData.events.map ((post, i) => {
+      return (
+        <li key={i}>
+          <Timeline event={ post } />
+        </li>
+      )
+    });
+
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Application title</h1>
+          <h1 className="App-title">React Timeline</h1>
         </header>
         <main className="App-main">
+          <ul>
+            {postingData}
+          </ul>
         </main>
       </div>
     );

src/components/Timeline.js

@@ -2,9 +2,14 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  // Fill in your code here
-  return;
+
+const Timeline = (props) => {
+
+  return(
+    <div className='timeline'>
+      <TimelineEvent status={props.event.status} person={props.event.person} timeStamp={props.event.timeStamp}/>
+    </div>
+  );
 }
 
 export default Timeline;

src/components/TimelineEvent.js

@@ -2,9 +2,17 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  // Fill in your code here
-  return;
-}
+const TimelineEvent = (props) => {
+
+  const time = <Timestamp time={ props.timeStamp} />
+
+  return(
+    <section className='timeline-event'>
+      <p className='event-person'>{props.person}</p>
+      <p className='event-status'>{props.status}</p>
+      <p className='event-time'>{time}</p>
+    </section>
+  );
+};
 
 export default TimelineEvent;