Ports - Kasey #21
Ports - Kasey #21
Conversation
There was a problem hiding this comment.
So since we talked about how props work, I wanted to make sure that I pointed to how they're working in the code, since your code is, in fact, working and looks great. But the props are confusing, even after they work.
I left comments throughout that show where tab A fits into slot a, so to speak. I hope it makes sense.
Only other thing is: The className= stuff that you'll be doing to put on CSS styles if you want 'em are stylesheets that already exist, so don't make the mistake I did and waste time trying to write them. There's a Timeline.css and a TimelineEvents.css and they've got all the stuff.
| const timelineComponents = props.events.map( (timeline, i) => { | ||
| return ( | ||
| <li key={i}> | ||
| <TimelineEvent |
There was a problem hiding this comment.
This is where you're passing the props to TimelineEvent.
|
|
||
| {/* <h3>{ props.timestamp } </h3> */} | ||
| <h3> <Timestamp time= { props.time }/></h3> | ||
| {/* so, note to self, it has to match the name time on Timestamp */} |
There was a problem hiding this comment.
This is the part where TimelineEvent is catching the props that Timeline passed in.
src/App.js
Outdated
| @@ -15,6 +15,7 @@ class App extends Component { | |||
| <h1 className="App-title">Application title</h1> | |||
| </header> | |||
| <main className="App-main"> | |||
| <Timeline events={timelineData.events} /> | |||
There was a problem hiding this comment.
This line passes the JSON as a prop into Timeline.
| // <Timeline events={timelineData.events} /> already sending it events? | ||
| // side question, how would you debug that? | ||
|
|
||
| const timelineComponents = props.events.map( (timeline, i) => { |
There was a problem hiding this comment.
This .map is running over the events prop that it got from App.js
src/components/TimelineEvent.js
Outdated
| <section> | ||
|
|
||
| {/* <h3>{ props.timestamp } </h3> */} | ||
| <h3> <Timestamp time= { props.time }/></h3> |
There was a problem hiding this comment.
This part is a little nuts, so bear with it ... Timestamp knows how to make the Very-Robotic-Official-Computer-Science time element from that the JSON has in it into a sentence like "a week ago" or whatever. App.js gave us this stupid time format that's ugly and doesn't fit, but if we REGIFT it to Timestamp, it can use it. Coooool. So the part where it's saying Timestamp time= { props.time } is where TimelineEvents hands the props.time it JUST GOT from App over to Timestamp.
React Timeline
Congratulations! You're submitting your assignment!
Comprehension Questions