Ports - Amy W #3
Conversation
| </header> | ||
| <main className="App-main"> | ||
| <Timeline events={timelineData.events} /> |
There was a problem hiding this comment.
I like how neat and simple passing timelineData.events is.
|
|
||
| const timelineComponents = props.events.map( (event, i) => { | ||
| return ( | ||
| <li key={i}> |
There was a problem hiding this comment.
This definitely works, and perhaps is even a better semantic solution, but since the TimelineEvent is a single thing, you could also just return that and not use a ul at all.
| return ( | ||
| <section> | ||
| <ul> | ||
| { timelineComponents } |
There was a problem hiding this comment.
(See above comment -- again, not a fix, just an alternate idea)
| }); | ||
|
|
||
| return ( | ||
| <section> |
There was a problem hiding this comment.
There was a CSS class provided called "timeline" that sets the width to 30%, margin to auto, and text-align left that you could throw in here.
| {props.status} | ||
| </p> | ||
| <h5> | ||
| <Timestamp time={props.timestamp}/> |
There was a problem hiding this comment.
Nice use of the provided Timestamp component.
| const Timeline = (props) => { | ||
|
|
||
| const timelineComponents = props.events.map( (event, i) => { | ||
| return ( |
There was a problem hiding this comment.
There are some provided CSS classes in TimelineEvent.css (timeline-event, timeline-event:hover, event-person, event-status, event-time) that would auto-style things for you :)
React Timeline
Congratulations! You're submitting your assignment!
Comprehension Questions