We've now got both a square screen component and multiple color counters that we're showing inside of
it.
So it starts to raise a really interesting question.
We need to have three different state variables one for tracking the amount of red one for the amount
of blue and one for the amount of green that we're trying to show to the user.
So now we need to figure out exactly where we're going to locate those different state variables.
In other words where are we going to create them.
Are we going to create a state variable inside of square screen or are we going to create three separate
ones in each of these different components.
This video we're going to take a look at a couple diagrams that's going to give us guidance on how we
tackle exactly this problem.
OK so first off here's a diagram of our current component hierarchy.
We've got our square screen that is the parent and we've got three separate instances of color counter
one for showing red one for green and one for blue and the first thing I want to point out here is that
all these different components kind of have different demands on these state variables we want to create
in the case of the square screen this thing wants to only read the three different state variables that
we need to create.
When I say three different state values I'm talking about one state variable for checking the amount
of red one for the amount of green and one for the amount of blue.
And remember those different values are going to range from zero up to 255 square screen needs to read
these three different state values because it's going to eventually be responsible for showing that
colored square and applying those three different colors to it as a background color property.
On the other hand these child child components down here need to change those different values because
each of them are going to show some buttons that are going to allow a user to tap it to either increase
say or the amount of red or decrease the amount of red.
Same thing for green and blue.
So with that in mind here's the general rule that we're going to use anytime we've got some kind of
shared state that needs to be distributed among multiple different components.
So generally we're going to create state variables in the most parent component that needs to either
read or change a state value.
In this case the square screen is the most parent component and it needs to read those three different
state values.
So we're going to create those three different state values inside of square screen.
Now notice I say on here generally there are some situations and situations that we're going to definitely
run into together inside of this course where this rule doesn't quite apply what you're going to see
those situations in great detail as we start to work on these other applications so again we're going
to locate or we're going to create our three different state values inside of square screen because
it is the most parent component that needs to either read or change those three state values now that
starts to raise a really interesting question.
If we create these three different state values inside of square screen how are cow color counter on
all three of these.
How are they going to change those values.
And for that matter if our application was different how would they read those values if they needed
to as well.
Well two diagrams to answer those questions.
So first off if a child ever needs to read a state value that is created inside the parent then we can
pass that state value down as a prop.
Now just a quick aside here our application in our application color counter does not need to read these
values whatsoever.
Color counter has nothing to do with actually reading or printing out the current color values.
I'm just showing you this for your own info just you understand how we would approach this problem.
So if we for some reason had to communicate the current value of red or green or blue from Square screen
down to color counters we would pass it down as a prop using the prop system.
So remember I showed you a diagram a little bit ago about state and I said that we could technically
pass a state value down to a child as a prop and that's where the state system and the prop system start
to kind of commingle and that's when they get a little bit confusing.
Once again we're going to see an example of this later on INSIDE THE COURSE.
So don't worry you'll get a lot of experience with this as well.
Now what about if a child component needs to change a state value.
That's the situation we're in.
We need our child components to change the value of red or green or blue.
That's currently being managed by square screen if that's the case then we're going to pass a callback
function down to these children as a problem.
So we're going to essentially pass down a callback function from Square screen down to color counter
and inside that callback function color counter can invoke that function and make a change to that state
value that will change the state value inside of square screen causing it to re render and remember
whenever a parent reenters or kind of re shows itself on the screen it will also render all of its children
as well.
All right.
So in this video I showed you a couple confusing diagrams.
This is just our first taste taste of managing state between different parent child components.
So I'm sure at this point some of this terminology is a little bit strange but like I said you're gonna
get a lot of practice doing exactly these different scenarios throughout different applications inside
this course.
As a matter of fact we're going to have to essentially do this exact case right here in the next video.
So let's take a quick pause and in the next video video we're going to make sure that the square screen
passes a callback function down to each of these different components that will allow those components
to update those state values.
It's a quick pause and I'll see you in just a minute.