diff --git a/src/App.js b/src/App.js index 5f4cdf8..141606d 100644 --- a/src/App.js +++ b/src/App.js @@ -4,17 +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 (
-

Application title

+

{timelineData["person"]}s Timeline

+
); 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 ( + + ) + }) +} + +const Timeline = (props) => { + return ( +
+ { timelineEventComponents(props.events) } +
+ ); } -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 9079165..590c242 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 ( +
+
+

{props.person}

+

{props.status}

+

+
+
+ ); } -export default TimelineEvent; +export default TimelineEvent; \ No newline at end of file