In the last section we put together our first instance of component nesting so we now have several copies
of the comment detail component showing up inside the app and we were able to confirm that inside of
our actual application over here.
Now as I've said many times the current issue with our application is that every single comment detail
has the same exact author's name time and content.
So in this video we're going to figure out how to fix that.
Now before I tell you exactly how we're going to fix it I first want to show you a quick diagram that
you're going to see many times throughout this course.
And in a lot of blog posts in articles around re-act this diagram right here is what we might refer
to as our component hierarchy.
It's a diagram that tells us the different components that are currently being displayed inside of our
application and the relationship between those different components.
So in this diagram we would say that we have a single instance of the app component and then underneath
it we have three instances of the comment detail because the app is showing the common detail or because
the common details nested inside the app we would refer to the app as a parent component.
And these comment details as child components were going to use this term child components or children
many times throughout this course and some of the later things that were even going to do in the section
are going to depend heavily upon this idea of child components.
OK so now that we understand this diagram right here I want to tell you about the prop's system which
we're going to use to customize the comment details when they show up on the screen.
We're going to come back to a form of this diagram in just a second to help you understand how props
really work.
OK.
Here we go.
So the props system in react is a system for passing data from a parent component to a child or a nested
component.
The entire goal of the prop system is to somehow communicate data from the parent down to a child with
the ultimate goal of customizing the child and making sure that the content that it displays on the
screen is somewhat different or to make sure that the behavior of the component is different when the
user interacts with it.
Remember the overall goal of components.
Their goal is to either show some content to the user or react to user interaction.
So the whole purpose of props is to customize those two things.
Either customize how their component looks or how a user interacts with it.
All right.
So similar diagram over here too we were just looking at before.
Here's the general idea with props are app component is going to show instances of the commet detail
when the app shows those components at the same time.
It's going to pass in a little bit of configuration to each of those different common components.
This little configuration each these would refer to as props are going to supposedly tell the comet
detail to maybe show a name or an author of Alecs of Shane or Sam.
We can also use the same props system to customize the time that each common detail is showing and customize
the content as well.
There's no limit to the amount of information that we can share over this prop system so we can pass
one piece of configuration like hey play.
Please use the name of Alex.
Or we could pass down 20 or 30 or 40 or 50.
Now in practice there usually tends to be an effective limit on the amount of information that we want
to pass from a parent to a child's.
But we'll learn more about that over time as we get a better handle on some best practices around props
in handling data inside of re-act application.
OK.
So that's the Propp system.
Remember it's all about having a parent customize how the child looks or behaves.
Let's take a quick pause here.
When we come back the next section we'll learn more about the syntax around passing props from a parent
down to a child.