diff --git a/src/App.js b/src/App.js index 5f4cdf8..f13a5e8 100644 --- a/src/App.js +++ b/src/App.js @@ -3,18 +3,17 @@ 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 return (
-

Application title

+

Ada Lovelace's Feed

+
); diff --git a/src/components/Timeline.js b/src/components/Timeline.js index 624d4ec..ca7c34a 100644 --- a/src/components/Timeline.js +++ b/src/components/Timeline.js @@ -2,9 +2,23 @@ import React from 'react'; import './Timeline.css'; import TimelineEvent from './TimelineEvent'; -const Timeline = () => { - // Fill in your code here - return; -} +const Timeline = (props) => { + const posts = props.events.map((event, i) => { + return ( +
+ +
+ ); + }); + + return ( +
+ { posts } +
+ ); +}; export default Timeline; diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js index 9079165..6b0f939 100644 --- a/src/components/TimelineEvent.js +++ b/src/components/TimelineEvent.js @@ -2,9 +2,26 @@ import React from 'react'; import './TimelineEvent.css'; import Timestamp from './Timestamp'; -const TimelineEvent = () => { - // Fill in your code here - return; -} +const personTimestamp = (props) => { + return ( + + ); +}; + +const TimelineEvent = (props) => { + return ( +
+

+ Person: { props.person } +

+

+ Status: { props.status} +

+

+ Timestamp: { personTimestamp(props.timeStamp) } +

+
+ ); +}; export default TimelineEvent;