1 00:00:00,630 --> 00:00:09,690 And once we're familiar with a set up, of course, we'll start by looking at the used state hook, 2 00:00:09,930 --> 00:00:13,790 sounds like I just mentioned the U.S. state as well as used. 3 00:00:13,790 --> 00:00:16,260 The fact are going to be most used. 4 00:00:16,530 --> 00:00:18,630 However, before we do anything. 5 00:00:18,990 --> 00:00:25,200 Let me just showcase why we would want to use you state in the first place. 6 00:00:25,650 --> 00:00:27,570 Now, this is just going to be a basic example. 7 00:00:27,570 --> 00:00:32,070 Please understand that, of course, you state can do way, way more than that. 8 00:00:32,370 --> 00:00:37,480 But I think it's going to give you a good idea why using U.S. state. 9 00:00:38,750 --> 00:00:47,440 Is necessary as our applications get bigger and more complicated, so the file that we're looking for 10 00:00:47,670 --> 00:00:51,540 is going to be located in tutorial folder online. 11 00:00:51,550 --> 00:00:54,870 We're looking for use state and then we have the final one. 12 00:00:55,270 --> 00:00:59,230 So that is going to be our complete code and then we have to set up one. 13 00:00:59,470 --> 00:01:07,720 So this is where we'll do our work on the file we're looking for is this error example just now. 14 00:01:07,720 --> 00:01:13,340 First, what I would want in the app, jazz, though, is to set up the container. 15 00:01:13,790 --> 00:01:16,380 Now, why do I want to have a container? 16 00:01:17,230 --> 00:01:22,990 Because it's just going to have a little bit of styling if you navigate to, as you'll notice, the 17 00:01:22,990 --> 00:01:23,860 container class. 18 00:01:24,130 --> 00:01:26,830 And I just added a little bit of styling. 19 00:01:27,190 --> 00:01:30,850 So I'll add that container for all my examples. 20 00:01:31,240 --> 00:01:35,080 Just please keep in mind it doesn't affect the functionality. 21 00:01:35,380 --> 00:01:40,130 It just affects how the examples are going to look like. 22 00:01:40,390 --> 00:01:47,820 So if I navigate back to jazz, I'm going to wrap all my examples into this container. 23 00:01:48,070 --> 00:01:49,540 So what I would want right now. 24 00:01:50,560 --> 00:01:56,660 Is where we have the return, which is going to go with Dev and then within is there for the time being 25 00:01:56,930 --> 00:02:02,120 just the showcase that nothing will change our place of the setting to. 26 00:02:02,450 --> 00:02:04,550 So let me move up the center now. 27 00:02:04,550 --> 00:02:07,970 Of course, I need to set up a proper return and all that. 28 00:02:08,090 --> 00:02:16,670 And once I do notice, like I said, if will just this class name of container will get a little bit 29 00:02:16,670 --> 00:02:17,260 of styling. 30 00:02:17,570 --> 00:02:23,810 So essentially I'll place all our examples in that container so that work is just going to look a little 31 00:02:23,810 --> 00:02:24,350 bit better. 32 00:02:24,650 --> 00:02:30,190 And then in order to work with our files, we're looking for this error example. 33 00:02:30,250 --> 00:02:36,950 Just now, all of them have been set up as default so we can name whatever we would want. 34 00:02:37,190 --> 00:02:43,220 Now, in my case, I name them explicitly what we're covering in that particular video. 35 00:02:43,450 --> 00:02:47,740 So, for example, if this is our example, I went with explicit name. 36 00:02:47,760 --> 00:02:52,930 Now, of course, if you want, you can shorten this up in the objects that is up to you. 37 00:02:52,940 --> 00:02:59,720 In my case, I will call all of them set up, meaning as we move from lecture to lecture, I'll keep 38 00:02:59,720 --> 00:03:01,010 this name off up. 39 00:03:01,280 --> 00:03:06,860 And then the only thing that will change is the file where I'm getting the component. 40 00:03:07,160 --> 00:03:13,730 So in this case, of course, I'm looking into the area folder that I'm navigating to use state and 41 00:03:13,730 --> 00:03:18,760 then I'm looking for a set up, like I said, and then I'm looking for the error example. 42 00:03:19,070 --> 00:03:21,920 So that's the component I would want to work in. 43 00:03:22,220 --> 00:03:24,830 That's why I'm importing into abcess. 44 00:03:26,020 --> 00:03:31,960 And then I'll just place it in the container so I have my set up and I'm good to go. 45 00:03:32,200 --> 00:03:40,630 So what you should see on screen is the text of your state, her example, if you see that, that is 46 00:03:40,630 --> 00:03:44,270 awesome, because that is the file that we will work. 47 00:03:44,620 --> 00:03:51,000 Now, if that is not the text that you see, then of course, make sure that your import is correct. 48 00:03:51,250 --> 00:03:56,800 And like I just mentioned already, three thousand times, if you would want to see complete code, 49 00:03:57,040 --> 00:03:59,920 you're looking in the same folder in the U.S. state. 50 00:03:59,920 --> 00:04:04,470 How are you looking for the final folder and then error example address? 51 00:04:04,690 --> 00:04:06,850 So the filenames will be exactly the same. 52 00:04:06,850 --> 00:04:11,050 The difference, of course, is that in here you can see the complete code. 53 00:04:11,260 --> 00:04:16,810 So, for example, in the app, just if you want to see the complete code, what you could do. 54 00:04:17,920 --> 00:04:23,320 Is simply go with import again, whatever name, because it is default, so my guess I'll call this 55 00:04:23,320 --> 00:04:29,140 final from and then again, we're looking for a tutorial that I'm looking for you state and I'm looking 56 00:04:29,140 --> 00:04:31,690 for final and then error example. 57 00:04:32,030 --> 00:04:39,470 So right below the set up, I'm going to go with my final and you'll see the complete code. 58 00:04:39,880 --> 00:04:42,670 OK, so this is what we'll build in this project. 59 00:04:42,880 --> 00:04:49,780 Now, the reason why I'm showing you that, because that is going to be our setup for the remainder 60 00:04:49,960 --> 00:04:56,770 of the advanced tutorial videos where essentially you'll have one set up file and then the final one 61 00:04:56,920 --> 00:04:58,460 where you can see the complete code. 62 00:04:58,750 --> 00:05:05,080 So if you ever want to run what I have built, then of course just import the final. 63 00:05:05,350 --> 00:05:07,720 So that is going to be coming from the final folder. 64 00:05:08,020 --> 00:05:12,940 But the files that we're going to be working are going to be coming from the setup. 65 00:05:13,090 --> 00:05:23,740 So hopefully this is clear so I can remove my final and finally we can start working in our file in 66 00:05:23,740 --> 00:05:24,760 the jazz. 67 00:05:25,030 --> 00:05:28,820 So let me navigate there the error example now, of course. 68 00:05:28,930 --> 00:05:30,710 Notice that this is the complete one. 69 00:05:30,820 --> 00:05:32,400 Now, that's not the one that I want. 70 00:05:32,620 --> 00:05:40,150 I want our example just where I just have the U.S. state our example and what I would want to build 71 00:05:40,150 --> 00:05:40,560 over here. 72 00:05:40,900 --> 00:05:49,060 Well, I would just want to set up some kind of logic where once we press on a button, we would change 73 00:05:49,200 --> 00:05:49,720 the name. 74 00:05:50,260 --> 00:05:51,650 So what am I talking about? 75 00:05:51,940 --> 00:05:54,340 Well, in here I could go with that title. 76 00:05:54,350 --> 00:05:55,570 So some kind of variable. 77 00:05:55,840 --> 00:05:58,100 I'll call this a random title. 78 00:05:59,400 --> 00:06:03,460 And where I have my dress, I would want to have some kind of return. 79 00:06:03,840 --> 00:06:08,480 So in this case, what I'm going to do is use the react fragment again. 80 00:06:08,640 --> 00:06:10,820 I just don't want to create this soup. 81 00:06:11,040 --> 00:06:13,710 So I'm going to go with react to that and then fragment. 82 00:06:13,980 --> 00:06:21,240 And then when this fragment lets go with heading to and I'll look for my title, remember. 83 00:06:21,260 --> 00:06:25,740 And we needed to use the curly braces in order to access the variable. 84 00:06:25,990 --> 00:06:32,310 And of course once I do, I have my random title, Beautiful Life is great. 85 00:06:32,310 --> 00:06:36,420 But what if I were to add a button. 86 00:06:36,430 --> 00:06:43,910 So I'm going to go here with button, I'll type of button as well and I'll add a class name. 87 00:06:43,920 --> 00:06:48,000 Now this class is coming from my infectiousness again. 88 00:06:48,000 --> 00:06:52,560 If you want, you can check it over here and it just adds a little bit of styling in the class you're 89 00:06:52,560 --> 00:06:54,270 looking for is B10. 90 00:06:54,570 --> 00:06:57,570 And let's set up a on handler. 91 00:06:58,460 --> 00:07:05,120 And of course, we'll have to set up a function, so call this Handal click function and within the 92 00:07:05,120 --> 00:07:09,200 button, I don't know, let's call this change title. 93 00:07:09,590 --> 00:07:14,820 Let's say right now there's going to be an error because, of course, we haven't created a handle quick. 94 00:07:15,170 --> 00:07:16,220 So do that. 95 00:07:16,220 --> 00:07:18,900 So can't handle that. 96 00:07:18,920 --> 00:07:22,250 Click Nevada is my function beautiful. 97 00:07:22,640 --> 00:07:31,140 And now what I would want is to change this title from random people to something else. 98 00:07:31,490 --> 00:07:35,270 Now, first, let's just see whether we can access the title. 99 00:07:35,870 --> 00:07:43,570 And of course, I'll open up my console and let's see what do we have in a console once I click change 100 00:07:43,580 --> 00:07:43,720 that. 101 00:07:44,270 --> 00:07:46,670 Of course I can access the random title. 102 00:07:47,120 --> 00:07:47,660 How old? 103 00:07:47,660 --> 00:07:52,400 The idea was that once I click, I would want to change it to something else. 104 00:07:52,640 --> 00:07:54,840 I would want to change it to help people. 105 00:07:55,190 --> 00:07:56,920 So let's try whether we can do that. 106 00:07:57,260 --> 00:07:58,520 I'm going to go here with title. 107 00:07:59,620 --> 00:08:01,780 And line hello, people. 108 00:08:02,290 --> 00:08:11,500 Now, my question to you is, once we click the button, the handle click, do you think the random 109 00:08:11,500 --> 00:08:15,070 title will be updated in my component? 110 00:08:16,200 --> 00:08:25,080 Then the question is, once we click the button, notice I'm changing the title, so do you think we'll 111 00:08:25,080 --> 00:08:28,590 change also the value that we have in the dress? 112 00:08:29,190 --> 00:08:30,460 Well, let's try it out. 113 00:08:30,900 --> 00:08:31,980 We have random title. 114 00:08:32,370 --> 00:08:35,550 I click on Change title and nothing happens. 115 00:08:36,320 --> 00:08:42,740 And what's even more interesting that technically you can see in a council that we change this valley, 116 00:08:42,800 --> 00:08:49,030 correct, because in here it is title and it is random title and of course, we change it to help people. 117 00:08:49,040 --> 00:08:52,140 Now, once we come to log, it is how little people. 118 00:08:52,580 --> 00:08:57,930 Now, the problem is that we are not rendering the component. 119 00:08:58,610 --> 00:09:02,740 So we change the value and we're not rendering the component. 120 00:09:02,750 --> 00:09:05,570 That's the reason why we cannot see any changes. 121 00:09:05,600 --> 00:09:12,660 Now, the second thing is that we have no way to preserve this value in between the renters as well. 122 00:09:13,070 --> 00:09:14,920 So essentially, we would want two things. 123 00:09:15,440 --> 00:09:22,580 We would want to keep the value between the renters, but also we would want to trigger that. 124 00:09:22,580 --> 00:09:30,970 Or and this is where the U.S. state comes into play, where it will allow us to do just that. 125 00:09:30,980 --> 00:09:32,950 Again, very basic example. 126 00:09:32,960 --> 00:09:40,460 Of course, you can use you state for more than that, but this clearly shows us why we would want to 127 00:09:40,460 --> 00:09:43,120 use the U.S. state in the first place.