In last video we established two important facts.
First off we're going to initialize our different state values inside of square screen and because color
counter needs to change those values.
We're going to make sure that we pass down a callback function from Square screen down to color counter
that will allow them to modify those state values.
So let's open up our square screen component and first initialize those different state values so back
inside my code editor I'm inside my square screen file to get started.
I'm going to first import that U.S. State book from the react library at the very top.
Remember we referred to this function as a hook because it allows us to add in some new functionality
to a function based component then at the very top.
I'm going to initialize three different state values so the first one will be some value for the amount
of red that we want our square to have.
We'll also get our set red setter.
That will be you state and we're going to give it an initial value of 0.
Well then repeat that same process twice again for green and blue.
They'll do green or set green
and blue with set blue.
So now you've got three different state values.
We have three different centers one for each and each of those values is initialized to a value of zero.
So now we need to somehow make sure that our color counter components have the ability to somehow change
these different state values.
As I just mentioned back in this slide right here we're going to pass a callback function from the parent
down to the child.
And in that callback function we're going to allow these children to modify the value of red green or
blue OK.
So I'm going to find a color counter right here.
I'm going to add in two callback functions to each of these I'm adding two because each one needs to
either increment or decrement the current state value.
So four color counts are the first one right here.
I'm going to make up a new prop name.
I'm going to call it.
How about on increase so it's a child component every calls this function right here we want to increase
red by 1.
So we'll do on increase inside of your call set red red plus 1.
Like so then we'll do the same thing for handling a decrease as well.
So I'll add in on decrease I'm going to give myself a little bit of space here by adding in some new
lines just so I can very easily see these
and now four on decrease any time we run this function we want to decrease the value of red by 1.
So I will call set red red minus 1.
Like so
all right so we've only put the first one together but let's really quickly add in a console log for
red inside of here on a log of red then we're going to flip over to our color counter component.
We're going to wire up these callback functions to the buttons inside there.
You know we need to test out our code for just the color red for right now.
It's going to save this well then change over to color counter here's my color counter component.
I'm going to find my props object right here.
Remember we just added in to new props.
One was called on increase and the other is on decrease so we can pull those off of our props object
right here just like we did with color.
So we'll get on increase and on decrease.
Now we can wire up these two callback functions to both of the button elements we have inside of here.
So for both these button elements all out add on the on press prop inside they're all assigned a function.
And then if the user clicks on the button that says increased color I'm going to call the on increased
callback.
Same thing for the second one as well.
Year on press allowed in an era function if this button is ever pressed.
I will call on decrease so think about what's really going on here.
We are passing down this callback the way you can really think about this callback.
It's almost as though rather than passing down this callback what's really going on is we're really
passing down that expression right there.
We're passing down the ability to call set red with red plus one and set red with red minus one.
So we can almost imagine that we're kind of like copy pasting that little segment of code right there
and throwing it directly into this button callback or the on press handler.
Like right there we can almost imagine that is what is occurring.
So our child component is now more or less directly calling set red but it's being done to this kind
of layer of abstraction through the UN increase in on decrease callbacks OK.
Now we've added this in let's save both these files and we'll do a quick test so I'll open up my square
demo.
I'm gonna click on increased red once or twice and then decrease red once or twice as well well then
flip back over to my terminal and we should see the appropriate console logs.
So here we go we've got an initial value for Red of 0.
We then increased it to 1 and then 2 and then I decreased a couple of times all the way down to negative
1.
Now of course we probably don't want to decrease our color values beneath zero because that's not a
valid color but we won't worry about that just yet.
We'll solve that problem in a moment.
All right.
So definitely looks like this is working.
We've now got a good example of a state variable being created in a parent component.
We passed down a callback function down to a child in this callback allows the child to update the value
of that state variable.
Remember anytime we call this set a right here or any setter it's going to cause our entire component
and all of its children to automatically re render as well.
So if we had this red property right here hooked up to some actual style inside of this component.
Well chances are everything would work as we expected okay.
So I'm going to clean up that console UGG red.
Let's take a quick pause right here.
When we come back the next video we're going to hook up our callbacks for green and blue as well.
Then we'll be able to apply all these different colors to an actual view element and see that element
change its color so quick pause and I'll see you in just a minute.