1 00:00:00,720 --> 00:00:03,400 In last video we established two important facts. 2 00:00:03,400 --> 00:00:08,500 First off we're going to initialize our different state values inside of square screen and because color 3 00:00:08,500 --> 00:00:10,570 counter needs to change those values. 4 00:00:10,570 --> 00:00:15,580 We're going to make sure that we pass down a callback function from Square screen down to color counter 5 00:00:15,700 --> 00:00:18,550 that will allow them to modify those state values. 6 00:00:18,550 --> 00:00:24,370 So let's open up our square screen component and first initialize those different state values so back 7 00:00:24,370 --> 00:00:28,450 inside my code editor I'm inside my square screen file to get started. 8 00:00:28,480 --> 00:00:34,360 I'm going to first import that U.S. State book from the react library at the very top. 9 00:00:34,360 --> 00:00:39,220 Remember we referred to this function as a hook because it allows us to add in some new functionality 10 00:00:39,400 --> 00:00:43,050 to a function based component then at the very top. 11 00:00:43,080 --> 00:00:48,990 I'm going to initialize three different state values so the first one will be some value for the amount 12 00:00:48,990 --> 00:00:51,180 of red that we want our square to have. 13 00:00:51,210 --> 00:00:53,780 We'll also get our set red setter. 14 00:00:54,090 --> 00:00:58,790 That will be you state and we're going to give it an initial value of 0. 15 00:00:58,930 --> 00:01:02,600 Well then repeat that same process twice again for green and blue. 16 00:01:02,860 --> 00:01:04,840 They'll do green or set green 17 00:01:08,070 --> 00:01:13,680 and blue with set blue. 18 00:01:13,910 --> 00:01:16,890 So now you've got three different state values. 19 00:01:16,890 --> 00:01:23,630 We have three different centers one for each and each of those values is initialized to a value of zero. 20 00:01:23,650 --> 00:01:28,900 So now we need to somehow make sure that our color counter components have the ability to somehow change 21 00:01:28,930 --> 00:01:30,690 these different state values. 22 00:01:31,000 --> 00:01:35,830 As I just mentioned back in this slide right here we're going to pass a callback function from the parent 23 00:01:35,920 --> 00:01:37,190 down to the child. 24 00:01:37,360 --> 00:01:43,180 And in that callback function we're going to allow these children to modify the value of red green or 25 00:01:43,180 --> 00:01:45,710 blue OK. 26 00:01:45,750 --> 00:01:48,270 So I'm going to find a color counter right here. 27 00:01:48,270 --> 00:01:53,280 I'm going to add in two callback functions to each of these I'm adding two because each one needs to 28 00:01:53,280 --> 00:01:57,910 either increment or decrement the current state value. 29 00:01:58,110 --> 00:01:59,820 So four color counts are the first one right here. 30 00:01:59,820 --> 00:02:01,600 I'm going to make up a new prop name. 31 00:02:01,600 --> 00:02:02,230 I'm going to call it. 32 00:02:02,230 --> 00:02:12,640 How about on increase so it's a child component every calls this function right here we want to increase 33 00:02:12,910 --> 00:02:14,570 red by 1. 34 00:02:14,770 --> 00:02:19,860 So we'll do on increase inside of your call set red red plus 1. 35 00:02:19,870 --> 00:02:25,830 Like so then we'll do the same thing for handling a decrease as well. 36 00:02:26,230 --> 00:02:32,570 So I'll add in on decrease I'm going to give myself a little bit of space here by adding in some new 37 00:02:32,570 --> 00:02:34,550 lines just so I can very easily see these 38 00:02:37,930 --> 00:02:43,640 and now four on decrease any time we run this function we want to decrease the value of red by 1. 39 00:02:43,750 --> 00:02:46,840 So I will call set red red minus 1. 40 00:02:46,840 --> 00:02:47,350 Like so 41 00:02:50,230 --> 00:02:54,550 all right so we've only put the first one together but let's really quickly add in a console log for 42 00:02:54,550 --> 00:03:01,570 red inside of here on a log of red then we're going to flip over to our color counter component. 43 00:03:01,590 --> 00:03:05,080 We're going to wire up these callback functions to the buttons inside there. 44 00:03:05,130 --> 00:03:09,080 You know we need to test out our code for just the color red for right now. 45 00:03:09,120 --> 00:03:15,820 It's going to save this well then change over to color counter here's my color counter component. 46 00:03:15,890 --> 00:03:18,420 I'm going to find my props object right here. 47 00:03:18,440 --> 00:03:21,550 Remember we just added in to new props. 48 00:03:21,620 --> 00:03:27,530 One was called on increase and the other is on decrease so we can pull those off of our props object 49 00:03:27,530 --> 00:03:29,580 right here just like we did with color. 50 00:03:29,780 --> 00:03:35,000 So we'll get on increase and on decrease. 51 00:03:35,130 --> 00:03:40,620 Now we can wire up these two callback functions to both of the button elements we have inside of here. 52 00:03:40,680 --> 00:03:47,210 So for both these button elements all out add on the on press prop inside they're all assigned a function. 53 00:03:47,430 --> 00:03:52,380 And then if the user clicks on the button that says increased color I'm going to call the on increased 54 00:03:52,380 --> 00:03:57,190 callback. 55 00:03:57,310 --> 00:03:59,090 Same thing for the second one as well. 56 00:03:59,220 --> 00:04:04,080 Year on press allowed in an era function if this button is ever pressed. 57 00:04:04,090 --> 00:04:09,250 I will call on decrease so think about what's really going on here. 58 00:04:09,330 --> 00:04:12,860 We are passing down this callback the way you can really think about this callback. 59 00:04:12,860 --> 00:04:18,000 It's almost as though rather than passing down this callback what's really going on is we're really 60 00:04:18,000 --> 00:04:20,600 passing down that expression right there. 61 00:04:20,770 --> 00:04:26,780 We're passing down the ability to call set red with red plus one and set red with red minus one. 62 00:04:26,820 --> 00:04:31,710 So we can almost imagine that we're kind of like copy pasting that little segment of code right there 63 00:04:32,130 --> 00:04:37,020 and throwing it directly into this button callback or the on press handler. 64 00:04:37,240 --> 00:04:40,650 Like right there we can almost imagine that is what is occurring. 65 00:04:40,800 --> 00:04:46,870 So our child component is now more or less directly calling set red but it's being done to this kind 66 00:04:46,870 --> 00:04:52,850 of layer of abstraction through the UN increase in on decrease callbacks OK. 67 00:04:52,880 --> 00:04:58,170 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 68 00:04:58,170 --> 00:04:59,300 demo. 69 00:04:59,300 --> 00:05:05,770 I'm gonna click on increased red once or twice and then decrease red once or twice as well well then 70 00:05:05,770 --> 00:05:11,280 flip back over to my terminal and we should see the appropriate console logs. 71 00:05:11,320 --> 00:05:14,870 So here we go we've got an initial value for Red of 0. 72 00:05:14,890 --> 00:05:20,560 We then increased it to 1 and then 2 and then I decreased a couple of times all the way down to negative 73 00:05:20,560 --> 00:05:21,790 1. 74 00:05:21,790 --> 00:05:25,900 Now of course we probably don't want to decrease our color values beneath zero because that's not a 75 00:05:25,900 --> 00:05:28,350 valid color but we won't worry about that just yet. 76 00:05:28,360 --> 00:05:30,910 We'll solve that problem in a moment. 77 00:05:30,910 --> 00:05:31,090 All right. 78 00:05:31,110 --> 00:05:32,860 So definitely looks like this is working. 79 00:05:32,860 --> 00:05:37,910 We've now got a good example of a state variable being created in a parent component. 80 00:05:37,990 --> 00:05:44,200 We passed down a callback function down to a child in this callback allows the child to update the value 81 00:05:44,260 --> 00:05:46,090 of that state variable. 82 00:05:46,090 --> 00:05:51,280 Remember anytime we call this set a right here or any setter it's going to cause our entire component 83 00:05:51,550 --> 00:05:55,010 and all of its children to automatically re render as well. 84 00:05:55,030 --> 00:06:01,230 So if we had this red property right here hooked up to some actual style inside of this component. 85 00:06:01,360 --> 00:06:05,020 Well chances are everything would work as we expected okay. 86 00:06:05,040 --> 00:06:07,050 So I'm going to clean up that console UGG red. 87 00:06:07,060 --> 00:06:08,250 Let's take a quick pause right here. 88 00:06:08,260 --> 00:06:12,440 When we come back the next video we're going to hook up our callbacks for green and blue as well. 89 00:06:12,490 --> 00:06:17,320 Then we'll be able to apply all these different colors to an actual view element and see that element 90 00:06:17,320 --> 00:06:20,470 change its color so quick pause and I'll see you in just a minute.