In the last section we started talking about the props system in react.
Remember this is all about passing data from a parent to a child.
A child cannot pass data backup to the parent through the system directly.
We can kind of do it indirectly.
We'll see examples of that later on.
But the system is generally about communicating information from a parent to a child.
Now one other quick thing that I neglected to mention in the last section is that prop's is short for
properties just a little bit of trivia.
All right so how are we going to do this.
Well when we use the prop system there's kind of two stages.
There's the first stage in which we want to provide information from the parent to the child and the
second stage in which the child consumes or makes use of that information.
So let's first focus on how we provide information from the parent to the child going to look a little
bit like this right here.
So we are going to find in the parent component where we show an instance of the common detail.
Remember we do that right here inside the component right now to provide some information down to that
comment detail.
We're going to write out what looks like just about any other property or attribute that we've been
providing to GSX already.
We're going to say the property name equals and then the value for that property.
This information is then going to show up inside the come in detail.
Now that syntax right there looks very similar to a lot of the syntax we've already been making use
of inside of GSX for example a class name equals comments sure f equals forward slash.
All equals Avatar.
So the syntax here for providing a prompt to a child very similar to what you're already used to.
The other thing I want to mention about this property that we're providing right now is the name that
I chose right there I said author equals.
There's nothing special about me using the name author.
It's totally up to you on how you want to name this property that you're passing from the parent down
to the child.
We could have just as easily called it name or name of author or we could have called it person who
wrote this.
Or whenever you want it to be.
But in general we try to make it at least make some amount of sense in the context of making a comment.
It definitely makes sense to have a proper named author.
Because this is the author of the person who made this comment.
But again you can change that thing to be whatever value you want it to be.
No notice in this case the prop that I provided is a hard coded string that says Sam if we wanted to
we could just as easily place those curly braces and then reference them javascript variable inside
of here.
So maybe we have some javascript variable inside of our component called author we can reference it
like so but this first take is going to hard code some value not Sam but Sam it is going to hard code
the value for this first go through.
OK so let's flip back over to our app component.
We're going to try to add on this first prop of author.
All right so back every year I'm going to find my comment detail and I'm going to add in a prop of author
and I'll set it equal to Sam.
Now I keep on putting same.
There we go and I'll do the same thing on the next one.
So this one over here let's do Alex and I'll put on an author of Jane for the third one.
And I think we'll just stick with two three comments excuse me for right now is going to delete these
last two down here.
Now take notice of what we're doing here.
We are providing the same property name to each these details but each then has a different value.
So what this tells us is that when we provide a prompt to a component it's always going to a unique
version of that component.
And this prop. 8 year of author equal Sam is not going to be somehow shared with this second component
or the third component.
Over here this prop is unique in only being passed to this one very particular instance of the common
detail.
All right so now that we provided some detail or some information to a child we have to open up that
child's component like the actual source code for it and make sure that we consume this information.
Remember it's a two step process.
On the one hand we provide information on the other side.
We consume the information so over inside of content detail we need to somehow get access to that prop
that we have provided to this component that prop is going to show up inside of an object that is provided
as the first argument to this function.
So to this point we've not been referring to any arguments up here for this function.
But in fact it's always going to fight it with one argument.
The first argument which by convention we refer to as props right now let's just console log that prop's
argument and see what happens when we refresh our page.
So I'm gonna put that console log in there.
I'm going to save this file and I'll flip back over to my browser.
Now I'm going to also open up my chrome inspector so I can see that consul lock.
And here's my counsel and there's the three console logs.
So I've got object one object to an object three.
Each of these objects you see right here are from the three instances of combat detail that we have
now created.
You'll notice that that props object has a key value pair inside of it.
Now the key is author or in other words the name of the prop that we provided inside the app and the
value is the individual name that we provided to each of those common details.
So now to consume this prop in our comment detail we can find where we are currently making use of the
name or have the hardcoded name of Sam which is in this anchor tag right here.
I go in to remove Sam.
Put in my curly braces to indicate them about to reference a javascript variable.
And then inside there are reference props dot author like so.
So now whenever this comment detail is shown on the screen the common detail is going to look at that
prop's object.
It's going to see that there is an author property in there that's going to take that author's name
and stick it into this anchor tag.
So let's flip back over to our browser after saving this file.
Now that we were referring to the Propst author and back over here we'll see that our names have been
updated for each of the comments to Sam Alex and Jane which perfectly match up to the different property
values that we provided to those components.
All right so that's pretty much it.
That's the entire prop's system.
In a nutshell all we have to do is provide some information from the parent to the child by adding an
attribute like this right here and then in the child we will reference that prop's argument.
That is an object that contains the information that we provided from the parent.
And then we will refer to that Propp inside of our GSX.
That's all we got to do it's going to be the exact same series of steps over and over and over again.
All right so let's remove that council log.
I don't think we need that anymore.
And then we'll take a quick pause right here when we come back in the next section.
We're going to also attempt to customize our time and our blog content through this system as well.
So a quick break and I'll see you in just a minute.