1 00:00:00,330 --> 00:00:06,780 All right, and once we have covered why I would want to use you state now, of course, and let's learn 2 00:00:06,780 --> 00:00:11,580 the basics about the U.S. state and here's what we're going to build. 3 00:00:11,880 --> 00:00:14,490 Let me just quickly show you we're going to go with Important again. 4 00:00:14,490 --> 00:00:17,460 I'll call this final from online. 5 00:00:17,470 --> 00:00:25,120 We're looking for tutorial folder and your state of mind final and land use state basics. 6 00:00:25,530 --> 00:00:32,360 Now, since I named this final, of course, right after the set up, can just go with final close out. 7 00:00:32,650 --> 00:00:35,330 And this is going to be our component. 8 00:00:35,340 --> 00:00:36,390 We have random title. 9 00:00:36,630 --> 00:00:45,120 And I notice how once we start using you state, not only we can change the value and trigger render, 10 00:00:45,480 --> 00:00:50,160 but we can also preserve the value in between of the Randers. 11 00:00:50,190 --> 00:00:55,500 Again, this is just showcase that you can always take a look at what we're going to build, but. 12 00:00:56,300 --> 00:01:01,400 Of course, the father that we're looking for is a bit different, again, I will still call this set 13 00:01:01,400 --> 00:01:03,430 up because it's just easier. 14 00:01:03,440 --> 00:01:10,670 However, I'll change the path where I'm looking for a set up folder than instead of folder. 15 00:01:10,910 --> 00:01:16,040 I'm looking for use state basics component or file. 16 00:01:16,370 --> 00:01:21,340 And of course, you should see on screen use state basic example. 17 00:01:21,680 --> 00:01:23,540 And let me open up the sidebar. 18 00:01:24,230 --> 00:01:34,100 I'm going to navigate over there and essentially use state is a function and it is a function that is 19 00:01:34,100 --> 00:01:35,330 coming from here. 20 00:01:35,450 --> 00:01:40,520 However, notice that it is a named import. 21 00:01:40,880 --> 00:01:43,960 So unlike react, this is the named one. 22 00:01:44,030 --> 00:01:47,800 So we must, must, must, must, must have the collaboration. 23 00:01:48,140 --> 00:01:53,590 And then the name needs to be exact where we go with use state. 24 00:01:54,020 --> 00:02:02,990 Now just to prove that you state is a function, we simply comes along and we are right you state and 25 00:02:02,990 --> 00:02:06,110 you can clearly see that it is a function. 26 00:02:06,140 --> 00:02:06,560 Beautiful. 27 00:02:07,310 --> 00:02:11,330 So once that is clear, once we know that you state is a function. 28 00:02:11,670 --> 00:02:16,730 Now let's see what of this function returns because that is very, very important. 29 00:02:17,200 --> 00:02:17,920 SERN here. 30 00:02:17,930 --> 00:02:25,670 I'll just invoke it and you'll notice something interesting where it returns an array and first thing 31 00:02:25,670 --> 00:02:26,780 is going to be undefined. 32 00:02:27,100 --> 00:02:33,720 Essentially this is going to be the state value that we're going to years and the second one is a function. 33 00:02:34,130 --> 00:02:37,160 Now this function will control this value. 34 00:02:37,790 --> 00:02:41,230 Now you're probably wondering, OK, why this is undefined. 35 00:02:41,690 --> 00:02:47,120 Well, because when we invoke you state, we need to pass in default value. 36 00:02:47,450 --> 00:02:50,230 Now, keep in mind that this value can be a string. 37 00:02:50,780 --> 00:02:56,960 It could be a number, can be an array, it can be an object, can be boolean whatever JavaScript value 38 00:02:57,200 --> 00:02:57,900 you'd want. 39 00:02:58,070 --> 00:02:59,120 So, for example. 40 00:03:00,140 --> 00:03:07,610 If all past year, hell of world, which you'll see that our value now is a strength, so that is my 41 00:03:07,610 --> 00:03:08,220 default value. 42 00:03:08,450 --> 00:03:15,290 And then again, we have this function and from this point, we have multiple ways how we can access 43 00:03:15,300 --> 00:03:15,500 that. 44 00:03:15,890 --> 00:03:22,430 Because keep in mind, if you state returns an array, of course we can assign it to a variable. 45 00:03:22,430 --> 00:03:22,830 Correct. 46 00:03:23,150 --> 00:03:27,940 So in here I could go with and that value is equal to my user state. 47 00:03:27,950 --> 00:03:31,890 Again, we would need to pass in some kind of default value. 48 00:03:32,120 --> 00:03:33,890 So for now, I'll just pass. 49 00:03:33,940 --> 00:03:38,410 No, just I can see that of course we can pass a number as well. 50 00:03:38,780 --> 00:03:45,970 And then in order to access the first item in the array, we would go with square brackets and then 51 00:03:46,070 --> 00:03:46,640 the zero. 52 00:03:47,480 --> 00:03:53,750 Now let me copy and paste and in here I'll set up my function, since that is going to be the second 53 00:03:53,750 --> 00:03:54,680 thing that I'm looking for. 54 00:03:54,980 --> 00:03:56,570 So I'm going to be looking for the handler. 55 00:03:56,900 --> 00:04:03,170 And of course, I'll change this value as well, where now I'm looking for my function for the second 56 00:04:03,440 --> 00:04:05,210 item from my array. 57 00:04:05,990 --> 00:04:15,950 If all comes log, if we go, for example, with a value and a handler, you'll notice that the value 58 00:04:15,950 --> 00:04:16,610 will be one. 59 00:04:17,270 --> 00:04:22,670 And then the second value will be that function, the function of that control, this value. 60 00:04:23,000 --> 00:04:26,530 Now, I fully understand that at the moment it might be a little bit confusing. 61 00:04:26,930 --> 00:04:27,510 Don't worry. 62 00:04:27,830 --> 00:04:35,490 Just remember that this handler will be the function that controls the value that we have in our state. 63 00:04:35,960 --> 00:04:37,580 So in this case, of course, this is one. 64 00:04:38,430 --> 00:04:46,590 And in our first example, this was a world now all of this is beautiful, but what I would want is 65 00:04:46,590 --> 00:04:51,390 to select all of these and then just comment them up just so you can stay for a reference. 66 00:04:52,230 --> 00:04:55,900 If you remember, we had already this structuring. 67 00:04:56,580 --> 00:05:03,240 Now, what that allows us to do is set up everything in one line where I'm going to go with CONSED and 68 00:05:03,240 --> 00:05:06,830 then I would need to come up with a name for my state value. 69 00:05:07,320 --> 00:05:09,030 So this name could be anything. 70 00:05:09,300 --> 00:05:11,250 I will name this text. 71 00:05:11,640 --> 00:05:17,370 Just keep in mind you can name is Bobby, you can name Apple, Banana, whatever you want, so I'll 72 00:05:17,370 --> 00:05:19,560 name my first value text. 73 00:05:19,800 --> 00:05:25,000 So that of course will be my state value and the second thing is my function. 74 00:05:25,830 --> 00:05:27,750 So now of course I need to name that function. 75 00:05:28,110 --> 00:05:35,770 Now a common convention is using set and then whatever you name your variable. 76 00:05:36,180 --> 00:05:41,910 So if you named your state value, for example, text, then you go set text. 77 00:05:42,210 --> 00:05:46,710 If you would set this up as Apple, you go to Apple and said Apple. 78 00:05:46,890 --> 00:05:48,930 Now, again, this is a convention. 79 00:05:49,350 --> 00:05:52,200 You can name this taco and burrito. 80 00:05:52,500 --> 00:05:53,370 It doesn't matter. 81 00:05:53,640 --> 00:05:59,750 And then for destruction rules, you need to set it equal to your right. 82 00:06:00,110 --> 00:06:03,480 Now, of course, our array is coming from you state. 83 00:06:03,720 --> 00:06:11,310 Then we need to invoke it and then we need to pass in whatever again is going to be our default value. 84 00:06:11,610 --> 00:06:13,350 Now what is going to be our default value? 85 00:06:13,500 --> 00:06:16,110 That will be that random title. 86 00:06:16,710 --> 00:06:21,690 And once we have this set up now, let's try it out in our return. 87 00:06:22,540 --> 00:06:28,750 Again, we'll have our desex, of course, again, I'll go with react fragment just so we can keep on 88 00:06:28,750 --> 00:06:29,410 practicing. 89 00:06:29,830 --> 00:06:36,280 And then in here, let's use the heading one instead and I'll look for my text. 90 00:06:36,640 --> 00:06:39,130 So that is my state value. 91 00:06:39,490 --> 00:06:45,490 And just to showcase that, we can place whatever we would want or here I can just change it around 92 00:06:45,490 --> 00:06:49,840 to a one or ten or hundred nine, something like that. 93 00:06:50,020 --> 00:06:52,200 And then of course this value will be displayed. 94 00:06:52,660 --> 00:06:58,180 Just keep that in mind that whatever value would want as default on, you can set it up with a radius 95 00:06:58,180 --> 00:06:58,270 and. 96 00:06:58,300 --> 00:06:58,720 All right. 97 00:06:58,990 --> 00:07:03,210 Whether that is an object string, no boolean or whatever. 98 00:07:03,640 --> 00:07:06,250 And of course, once I have these two things. 99 00:07:07,190 --> 00:07:13,700 Now, we would need to come up with the button, correct, of the button that can change this value 100 00:07:14,180 --> 00:07:16,820 because we saw previously how we are not able to do that. 101 00:07:17,250 --> 00:07:19,360 First, let's come up with that button. 102 00:07:19,850 --> 00:07:23,810 And in here, I had a class name was Surbiton. 103 00:07:24,290 --> 00:07:30,680 Just so we have a little bit of styling and we'll do the same way and we'll have a unclick and then 104 00:07:30,680 --> 00:07:35,840 we'll pass and handle and then click now within the button. 105 00:07:36,260 --> 00:07:36,950 All right. 106 00:07:36,950 --> 00:07:39,320 Change I like. 107 00:07:39,350 --> 00:07:43,930 So and again, there's going to be an error where Handal click is not defined. 108 00:07:44,390 --> 00:07:46,180 And now, of course, let's set it up. 109 00:07:46,400 --> 00:07:47,690 I'm going to go with Hanle click. 110 00:07:48,720 --> 00:07:55,850 I'll probably add Consed over here and then we'll pass and our function, and then in this function 111 00:07:55,950 --> 00:08:02,790 I will finally use this set text and the way it works, we have multiple ways we can do that, how we 112 00:08:02,790 --> 00:08:04,470 can pass the new value. 113 00:08:04,770 --> 00:08:08,550 And a little bit later on we will look at the functional example. 114 00:08:08,970 --> 00:08:17,310 But for the time being, let me just go with text and then whatever will pass it in here now will be 115 00:08:17,310 --> 00:08:18,360 our new value. 116 00:08:18,930 --> 00:08:26,340 So, for example, if I want to change around the world, I just need to pass in that string where if 117 00:08:26,340 --> 00:08:28,860 I say hello world, now what? 118 00:08:28,860 --> 00:08:33,000 You'll notice that once we click on Change title. 119 00:08:34,130 --> 00:08:41,840 Of course, we invoke the little click and then in that click, we have our set text function. 120 00:08:42,320 --> 00:08:48,170 So the function that we're getting back from the U.S. state, we get back that function and then each 121 00:08:48,170 --> 00:08:52,260 and every time we invoke this function, we can change this value. 122 00:08:52,760 --> 00:08:53,570 So there it is. 123 00:08:53,840 --> 00:08:58,070 Once I click Norrish now nicely, I see my hello world. 124 00:08:58,340 --> 00:09:04,190 Now, of course, since I don't have any more logic, then every time will click after that is just 125 00:09:04,190 --> 00:09:05,240 going to be this whole world. 126 00:09:05,630 --> 00:09:08,930 But at least we already made good progress. 127 00:09:08,930 --> 00:09:11,610 Correct, because previously we were not able to do that. 128 00:09:11,960 --> 00:09:16,820 Now of course we are where once we click on a button, we change this again. 129 00:09:16,850 --> 00:09:22,400 We can refresh, we have random title and once we click and of course, it is going to be a whole world, 130 00:09:22,700 --> 00:09:28,190 not just the showcase that we can set it up, as always, to whatever we would want, just like with 131 00:09:28,190 --> 00:09:28,880 the default one. 132 00:09:29,300 --> 00:09:35,300 If I go to one of nine, you'll see that I have a title when I click the button. 133 00:09:35,600 --> 00:09:37,750 Of course I have one on home. 134 00:09:38,120 --> 00:09:38,600 All right. 135 00:09:39,110 --> 00:09:40,540 Hopefully that is clear. 136 00:09:40,760 --> 00:09:45,560 And now let me just set up a little bit of if and I'll statements. 137 00:09:45,920 --> 00:09:54,470 We're essentially depending on whatever value I already have, I'm going to set my new value using set 138 00:09:54,470 --> 00:09:54,920 text. 139 00:09:55,340 --> 00:10:02,690 And the way I can do that is I can say if and then I'll check what is the value for the text and if 140 00:10:02,690 --> 00:10:10,430 it is random and then title, then of course I would want to invoke set text and I would want to set 141 00:10:10,430 --> 00:10:12,930 it equal to a hello world. 142 00:10:12,980 --> 00:10:20,480 However, if that is not the case, essentially, if it is already our world, well then I will just 143 00:10:20,480 --> 00:10:22,280 set it back to a random one. 144 00:10:22,640 --> 00:10:23,990 So go text. 145 00:10:24,880 --> 00:10:27,970 Than random and entitled. 146 00:10:28,570 --> 00:10:34,450 So now you'll notice that we'll have this toggling functionality where I'm changing the title now of 147 00:10:34,450 --> 00:10:39,830 course it is going to change to Hello World Beautiful, we trigger or render. 148 00:10:40,210 --> 00:10:45,370 And then, of course, again, once we click, we have random title Assim. 149 00:10:45,820 --> 00:10:48,780 And this is how we can use the use that again. 150 00:10:48,790 --> 00:10:55,600 It is a function that we get from react once we invoke the function we would need to pass in default 151 00:10:55,600 --> 00:11:02,740 value, whatever we would want as far as string number, boolean or object or array. 152 00:11:03,190 --> 00:11:09,370 And then from this function, once we invoke it, when we get an array with two values, we use a right 153 00:11:09,370 --> 00:11:11,530 to structuring because it is just faster. 154 00:11:11,530 --> 00:11:13,720 However, we can also do this manually. 155 00:11:14,780 --> 00:11:20,870 Where we get that particular value and the function of that controls that value and each and every time 156 00:11:20,870 --> 00:11:28,360 we invoke this function, whatever value will pass and now will be that new state value. 157 00:11:28,700 --> 00:11:34,340 And of course, in order to access it, just like with normal variables, we just go with whatever name 158 00:11:34,340 --> 00:11:34,860 we pass. 159 00:11:34,890 --> 00:11:41,240 Here again, please keep in mind you can name these things however you want, but a common practice 160 00:11:41,240 --> 00:11:46,780 is using set and then whatever name of the value that you already set it up. 161 00:11:46,970 --> 00:11:49,860 And then of course, each and every time we click the button. 162 00:11:50,170 --> 00:11:56,120 Notice how we invoke our text and we keep on changing the state value. 163 00:11:56,280 --> 00:11:56,800 Beautiful. 164 00:11:57,020 --> 00:12:01,910 And those are the basics of use, state hook and react.