We've now set up our red callbacks.
So now we're going to do the same thing for green and blue as well.
So inside my square screen file I'm going to go down to my second and third color counters on both these
I'm going to give them a little bit of extra space by new lining the J.S. X element like so and then
inside of both them I'm going to define my two prop callbacks on increase and on decrease when I write
these four blue and green.
I just need to make sure that I reference the appropriate center in the appropriate state value so no
longer red.
Instead this one will be blue in the third one will be green.
Guess I'll do on increase
inside there I'll call set blue I'll be blue plus 1 and I'll do on decrease
and that's 1 will be set Blue Lou minus 1.
And then finally we will repeat that same process.
I'll do on increase
set.
Green green plus 1
and on decrease
set green green minus 1
All right.
That looks pretty good.
Now remember we've already hooked up the use of on increase in on decrease inside of color counter.
We only had to do that one time because we only have one color counter component after we hook up those
props one time we can then reuse that component as many times as we wish.
So now we can test this out once more.
I'll say the file.
We don't really have any feedback for red or blue or green right now.
So at present I'm just trying to make sure that I don't see an error message or anti like that so I
should build to press on increase decrease increase decrease in increase decrease and I don't see any
errors inside there whatsoever.
Okay.
So it's looking pretty good so now I think we're ready to actually make use of these different state
values and apply them to some view to give it some background color that we can control with these different
buttons.
So I'm going to go back to my square screen component.
I'm going to create a new view element at the very bottom right above the closing view tag that's all
inside there.
So place a view element right here.
I'm going to give it a style property.
We're gonna pass it a object directly.
So remember that means we have two sets of curly braces the outer set means we're about to reference
some javascript expression the inner set is creating an actual object literal then inside of here we
can set a hardcoded height of about 200 this is do something albeit smaller we'll do 150 and a width
of 1 on 150 now we can create our background color now for our background color.
We're going to once again use a string template.
So that's going to use our back to characters.
No that's not a single quote.
It's a back to character that inside of here we can do our G.B..
I'll put in my parentheses and then we need to essentially inject our current value for red green and
blue inside the string so we'll do dollar sign clearly race read dollar sign clearly race green dollar
sign clearly brace blue.
And notice how I've got the commas in between each of those different values that we're throwing into
that string.
All right so that should be it.
I think we're now ready to do a final test.
It's all save this file.
Notice how when I save it my code jumps again that once again is my code reformat or everything you
see here is a hundred percent equivalent to what I had before.
All right.
Now I'll go back over open up my square demo by default are starting values for the square hour 0 0
0 which causes the square to appear as just black.
So now I can add in some increased red.
And it's going to be really slow because we're changing it by one value at a time.
But if I tap this thing a whole bunch you're going to eventually start to see the thing turn a little
bit more red.
And yeah after I could get many many times it's definitely turning into the color red right here.
Well testing this out I'm happy it works but I'm immediately thinking that we need to make a change
to our application.
I think that rather than incrementing each of these different color values by one every time maybe we
should instead change it by like 10 or 20 or even 15 so going to go around to all my different callbacks
here I could decide to just update all these last one minus ones to like 10 or 15 or alternatively we
could create a constant value at the top of the file that would we could use in place the one right
here and that means if we ever wanted to change how much we adjust these color values by we would only
have to adjust that one constant value.
Let's try doing that at okay.
So at the top of the file above my component I'll create a new constant value called about color increment.
You'll notice I'm using all capitals here with an underscore convention anytime we make a true constant
value that we want to be some like configuration option inside of a component that is not a prop we'll
usually use this kind of syntax right here.
There's absolutely no different what's no difference whatsoever in creating this variable.
This is just assigned to other engineers that this is some very special variable I'll try starting off
with like a starting value 15 so now I can go back around to each of these ones that I have.
Delete them and replace it with color increment so I'll do that for every value of 1.
There we go so I'll save this all go to Square demo again.
Now if I tap on increased red.
Yeah.
Now it's definitely getting red a lot faster and I can do a lot of red and blue to turn it purple and
if I add in some green I'm going to turn white.
Yep I can now decrease some green decrease blue.
Same thing for red.
And now I'm getting more towards the green side of things.
Okay.
So it definitely looks good.
There's just one last small issue inside of here.
Remember we saw in that console log.
If we tap on decrease enough our color value is going to ease eventually go negative.
Chances are we don't want to have any negative color values inside of her app.
So we should probably put in some checks somewhere to make sure that if we ever tried to decrease a
color value beneath zero or increase it above 255 Well we should probably cap that.
Right now it's clearly not going to raise an error.
If we go into the negatives in color but the downside here is that if I type decrease red many times
I'm probably now like at a red value of negative 200 or something like that which means I would have
to tab increased red many many times before I even start to see a change up here.
And that's probably not a very good user experience.
So let's take another quick pause in the next video we'll figure out some way to kind of cap the value
of red blue and green.
Make sure there's some minimum value and maximum value as well.
So quick pause we'll take care of that in the next video.