In the last video we created the approval card component and then we showed it inside of our app member.
We now want to somehow get the approval curve to show a comment detail inside of it.
But we do not want to hard code the approval card to always 100 percent of the time show a common detail.
If we did so we would then lose out on some re-usability around the approval curve.
For example we couldn't reuse it to show some arbitrary text inside of there instead.
So how are we going to do this.
Well we're going to make use of a little feature in the prop's system.
Again at this point we've only discussed prop's as being some property name equals and then value that
you pass directly to a component inside of the component tag like inside that tag right there.
But there's another way that we can communicate information into some child component.
Let me show you how right now we have a approval card as a self-closing tag right here.
I'm going to update this so that it is no longer a self-closing tag.
So I'm going to delete that forward slash and then I'm going to put a closing tag on the other side
like so now the syntax right here shouldn't look too crazy.
It's essentially the same syntax that we use whenever we create a div.
We have the opening tag and then the closing tag.
So now to communicate this component down to the approval card and tell the approval card that we wanted
to show the common detail we're going to take this closing tag right here.
I'm going to cut it and then I'll put it on the other side of the common detail like so and then I'm
going to indent the comment detail.
So we are now taking this comment detail component and we are passing it as a prop down into approval
card.
Yes we would refer to this as a prop as well because we are providing some configuration to the approval
card component.
And when we pass this thing in we now have to open up our approval card component.
Remember every function that we put together receives a first argument that we refer to as props.
So that component that we just passed in as some configuration to this thing now exists on this prop's
object before we make use of it at all inside this file.
I want to very quickly console log that Propp subject just to show you exactly what happens.
OK.
So I got my console log there and now a flip back over to the browser.
Senao inside of my console over here you'll see that console log.
Notice how the application has not changed at all except for the fact that we're now missing one of
the three comments that we had before.
Let's take a look at the console log of that prop's object.
You can click on that arrow to expand it.
You'll notice that the props object now has a single property inside of it called children.
We just ignore that underscore underscore Prato that's not related to any Riak stuff or anything like
that that we are doing.
So we can expand that children object right there.
This right here is our common detail component.
So essentially when we pass one component to another using this syntax right here the child component
in this case comment detail is going to show up inside of the approval card on the prop's object and
specifically on a property of the prop's object called the children property.
So we could cancel log out just that comment detail by doing a Propst not children like so if I now
save this our file will automatically rerun.
You could ignore.
You notice I have that little 403 forbidden there.
That's just because I failed to fetch the image.
Well you'll notice more importantly the consul log right here is now of just to react component itself.
So now we can show that thing inside of the body of our approval card for us in particular.
We want to replace this hard coded.
Are you sure.
With whatever's coming over on Propst not children.
So because you want to reference a javascript variable here Propst children are put in my curly braces
and say prop's not children like so and then I'm going to remove that log.
OK.
So I'll now save this and if I now flip back over we can see that my comment detail is now showing up
inside of the approval card just as we intended.
Awesome.
So that's pretty much it.
That is the strategy that we use when we want to make truly reusable components if we ever want to show
some component or some custom content inside of a component then we will take the child.
We will wrap it with a parent component and then that child component is going to show up inside of
the child on the prop's children property.
It's always going to show up on the Propst not children so that we can then take that Propst start children
property and reference it from anywhere inside of our GSX.
So if we wanted to instead show the child at say the very bottom of the card then I could cut that out
and paste Propp start children with the curly braces down here instead.
And now we'll see that the comment shows up down here at the very bottom of the card which looks kind
of funky but I think you now get the idea for us in particular.
We wanted to show it inside of the div with class name content so that it looks like that.
Where is it.
That right there.
All right so that's pretty much it.
That's how we create some reusable components.
So now we know how to do that.
I would really like it if we took a pause right here in between this video and the next you tried to
take this approval card component and use it to wrap both of our other comment details as well.
So all you do is essentially do the same thing we did right there to show an instance of comment detail
inside of our approval card.
So a quick pause and we'll go over the solution to this in the next video.