Space - Faezeh

src/App.js

@@ -1,19 +1,17 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
 import timelineData from './data/timeline.json';
 import Timeline from './components/Timeline';
 
 function App() {
   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 Social Media Feed</h1>
       </header>
       <main className="App-main">
+        <Timeline events={timelineData.events} />
       </main>
     </div>
   );

src/components/Timeline.js

@@ -2,9 +2,28 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
+const Timeline = ({events}) => {
+  // const {events} = props; - destructuring
+  const timelineComponents = events.map((event, i) => {
+    return (
+      // used spread operator for event instad of using .key for retrieving each. 
+      // this is repacing lines 23-25
+      <TimelineEvent { ...event } key={event.timeStamp} />
+    );
+  });
 
-  return;
+  return(
+    <div className='timeline'>
+      {timelineComponents}
+    </div>
+  ); 
 }
 
+{/* <TimelineEvent
+        person={event.person}
+        timeStamp={event.timeStamp}
+        status={event.status}
+        key={event.timeStamp}
+      /> */}
+
 export default Timeline;

src/components/TimelineEvent.js

@@ -2,9 +2,15 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-
-  return;
+// using destructuring to extract elements of props
+const TimelineEvent = ({person, timeStamp, status}) => {
+  return (
+    <div className="timeline-event">
+      <div className="event-person">{person}</div>
+      <div className="event-time"><Timestamp time={timeStamp} /></div>
+      <div className="event-status">{status}</div>
+    </div>
+  );
 }
 
 export default TimelineEvent;