diff --git a/src/App.js b/src/App.js index 5f4cdf8..ecaee78 100644 --- a/src/App.js +++ b/src/App.js @@ -7,14 +7,13 @@ import Timeline from './components/Timeline'; class App extends Component { render() { console.log(timelineData); - - // Customize the code below return (
-

Application title

+

Code Monkey

+
); diff --git a/src/components/Timeline.css b/src/components/Timeline.css index e31f946..bd1f418 100644 --- a/src/components/Timeline.css +++ b/src/components/Timeline.css @@ -2,4 +2,5 @@ width: 30%; margin: auto; text-align: left; + list-style-type: none; } diff --git a/src/components/Timeline.js b/src/components/Timeline.js index 624d4ec..c4ca095 100644 --- a/src/components/Timeline.js +++ b/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( (event, i) => { + return ( +
  • + +
  • + ); + }); + + return ( +
    + +
    + ); } export default Timeline; diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js index 9079165..23f8200 100644 --- a/src/components/TimelineEvent.js +++ b/src/components/TimelineEvent.js @@ -2,9 +2,20 @@ 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;