In the last section we learn more about the props system in react.
We learn the syntax around passing a prop from a parent down to a child.
We say the property name equals and then the value that we want to pass down then inside that target
components are the component that we are showing as a child.
We're going to receive that property data inside this first argument that we usually refer to as the
prop's object.
This is a javascript object that contains all the information that was passed from the parent.
So we can then make use of that information inside of the child component.
Now in this video we're going to go through that exact same series of steps to update our time right
here and the blog content and make sure that those can be customized from the parent as well.
Understanding the prop system is absolutely key and react.
That's why we're going to go through this thing again even though it might seem a little bit too tedious.
OK.
So let's now focus on doing our date right here.
So I want to make sure that I provide the date as a configuration option or a prop from the parent component.
So in order to do so I can go back over to my component.
I'm going to add in a new crop to each of these different commet details.
I'm going to give these a name of how about time a go.
I think that's reasonable and I'll provide a simple string that says something like today at or I don't
know 50 45 pm and I'll do the same thing for the next one I'll say time ago equals today at 2 a.m..
And then maybe the third one I'll do time to go equals yesterday.
At 5 am like so it's the exact same way we now have a new property name of time ago and a value for
each of those different properties.
So now over inside of our common detail is prop's object right here is going to contain two key value
pairs.
It's going to have both Propst author and prop's start time ago so I can find where I'm currently renting
out the date inside that span or delete that and I will replace it with the set of curly braces because
again I want to reference a javascript variable and then inside of here I'll say Propp start time ago.
Lexa so I can save this a flip back over and I see my new updated times of 4:45 2:00 a.m. and 5:00 p.m.
yesterday.
All right.
Not bad.
So now at this point I want you to get a little work or a little practice on using this prop system
on your own.
So between this video and the next one I want you to take a shot at providing the comment techs down
here as a prop and also I would really like it if you try to provide the image avatar right here as
a prop as well.
So go ahead give it a shot.
Your goal is to pass the comment text from the parent and the image source from the parent as well.
Go ahead and give it a shot.
Remember if you run into any trouble whatsoever we're going to go over the solutions in the next video
so you'll be able to see how to do this in very simple terms.
So let's take a quick pause right here.
We come back the next section or we'll see some solutions.