1 00:00:00,450 --> 00:00:07,590 So let us make sure in our course in this lesson, we are going to record the second phase, which is 2 00:00:07,590 --> 00:00:17,960 the updating phase, OK, in religious components like in religious components and in religious components, 3 00:00:17,970 --> 00:00:18,810 love seekers. 4 00:00:19,110 --> 00:00:23,130 Get so I'm going to advise you to to comment. 5 00:00:23,170 --> 00:00:24,480 This is parts. 6 00:00:24,480 --> 00:00:27,950 So we are going to leave only the components. 7 00:00:27,960 --> 00:00:32,340 OK, let us back here in our ARANETA function. 8 00:00:32,640 --> 00:00:36,420 OK, we are going to commence the timer components. 9 00:00:37,710 --> 00:00:42,730 Let us be clear, can't rely on this page and what's it going to say? 10 00:00:42,960 --> 00:00:45,510 We cannot record the updating fees. 11 00:00:45,510 --> 00:00:54,720 As you can see, I have told you and when we are now in the component demands, OK, what's the components 12 00:00:54,720 --> 00:00:55,600 is mounted. 13 00:00:55,830 --> 00:01:00,500 We cannot access to the second phase, which is the updating phase. 14 00:01:01,110 --> 00:01:09,180 And in this uplifting phase, we can update our creative components, like by updating our creative 15 00:01:09,180 --> 00:01:13,080 components, we are going to court the state that function. 16 00:01:13,110 --> 00:01:20,220 Like they said, that function allows us to create components to update components that we have already 17 00:01:20,220 --> 00:01:22,890 created in the mountain phase. 18 00:01:23,370 --> 00:01:30,380 And once you create most recently excuse me, once you update your components, we are going to access 19 00:01:30,380 --> 00:01:38,040 the game to the render function because the render functions will now help us to render this update 20 00:01:38,040 --> 00:01:38,910 to the dome. 21 00:01:38,940 --> 00:01:46,680 OK, render this update to the dome in order to view these different tenses, because you can say, 22 00:01:46,680 --> 00:01:55,920 for example, for the first time, as you can see for this first phase, our step is equal to one. 23 00:01:55,920 --> 00:01:57,690 That means the mountain phase. 24 00:01:58,110 --> 00:02:06,630 But once we access in the components this month, once our components is mounted, we are going to pass 25 00:02:06,630 --> 00:02:07,440 from the step. 26 00:02:07,440 --> 00:02:10,830 Want to step two, which is the updating phase? 27 00:02:10,860 --> 00:02:18,150 OK, so the state function will happen inside of the components this month. 28 00:02:18,510 --> 00:02:25,530 OK, make sure to call your state function in your component this month because when you are inside 29 00:02:25,530 --> 00:02:32,760 of your components these month, that means the component is mounted and now you can't use the set set 30 00:02:32,760 --> 00:02:33,270 function. 31 00:02:33,510 --> 00:02:43,680 OK, so let us right now to update our step away step data, which is inside of our state from one to 32 00:02:43,680 --> 00:02:51,690 two, because we are now in our updating phase, which is the second phase, and we're going to see 33 00:02:51,990 --> 00:03:00,900 how our readjust will automatically call the render function in order to render this update to the dome 34 00:03:00,900 --> 00:03:03,000 in order to view these changes. 35 00:03:03,190 --> 00:03:09,890 OK, and when our component is updated now, we can access to the components update. 36 00:03:10,140 --> 00:03:11,390 It is very simple. 37 00:03:11,400 --> 00:03:14,260 So let us back our visual studio code. 38 00:03:14,290 --> 00:03:19,980 So what was written to say we are going to come in every component this month and we are going to update 39 00:03:19,980 --> 00:03:23,880 this step because here the component is mounted. 40 00:03:23,880 --> 00:03:28,500 So we want to pass to the second phase, which is the updating phase. 41 00:03:28,860 --> 00:03:29,840 Let us come here. 42 00:03:30,090 --> 00:03:34,950 We're going to see this do not do not do like this. 43 00:03:34,950 --> 00:03:43,140 For example, if you want to update, you're going to say no, I can say this dot state, dot step, 44 00:03:43,530 --> 00:03:47,700 OK, you're going to say plus plus like, OK, that's me. 45 00:03:47,760 --> 00:03:50,900 OK, you just say plus plus okay. 46 00:03:50,920 --> 00:03:54,360 You add one or equal to these states plus one. 47 00:03:54,420 --> 00:03:55,530 OK, Latisse. 48 00:03:55,620 --> 00:03:57,480 So do not do like this. 49 00:03:57,510 --> 00:04:00,310 OK, it is not recommended. 50 00:04:00,330 --> 00:04:09,060 It is not very well because you are in, you are out of room, you are out of your construction if you 51 00:04:09,060 --> 00:04:11,420 are outside of your construction. 52 00:04:12,350 --> 00:04:18,590 Use state it if you want to update a data that you have in your state. 53 00:04:18,710 --> 00:04:25,040 OK, if you're out of your construction, you have to use the state state function in order to update 54 00:04:25,040 --> 00:04:25,870 these states. 55 00:04:26,040 --> 00:04:28,370 OK, so let us scroll down here. 56 00:04:28,730 --> 00:04:35,720 We are going to say this dot state state, OK, it's states like this. 57 00:04:37,250 --> 00:04:43,460 OK, call this function, and instead of our function, we're going to put cloudberries is here and 58 00:04:43,460 --> 00:04:47,510 we're going to say you're going you're going to take this step. 59 00:04:47,970 --> 00:04:48,350 OK. 60 00:04:49,570 --> 00:04:53,540 Put it here so you are not going to stay here, OK? 61 00:04:53,560 --> 00:04:54,900 You're going to take this step. 62 00:04:56,220 --> 00:04:59,020 Which is the value, which is the variable. 63 00:04:59,100 --> 00:05:04,890 OK, this tape, which is the variable in which we assign this village. 64 00:05:04,990 --> 00:05:15,060 OK, we are going to say, step, you are going to be equal to the current value, which is one plus 65 00:05:15,060 --> 00:05:19,770 one, because we want to pass from step one to step two. 66 00:05:20,000 --> 00:05:24,600 OK, so what you're you going to say take the current value now? 67 00:05:24,600 --> 00:05:32,100 You're going to say this dot state that OK, dot step in order to take the current value, which is 68 00:05:32,100 --> 00:05:32,520 one. 69 00:05:32,820 --> 00:05:40,350 And now you're going to add one and the step is going to be equal to two once you call this sets state 70 00:05:40,350 --> 00:05:40,950 function. 71 00:05:41,820 --> 00:05:44,490 OK, once you call the state this function. 72 00:05:44,520 --> 00:05:51,930 That means you update your status and directly it will automatically call again the render function 73 00:05:53,070 --> 00:05:59,400 and a render function will render this update to the dome in order to display these tenses. 74 00:05:59,400 --> 00:06:02,720 And now we can access to the component update. 75 00:06:02,940 --> 00:06:05,040 So let us back in our viewers to the code. 76 00:06:05,280 --> 00:06:14,130 As you can see, I have just told you a once this update, OK, is done, it will automatically call 77 00:06:14,130 --> 00:06:15,540 a get the render function. 78 00:06:15,540 --> 00:06:21,690 And that means here we are going to have another council log in which we're going to have stepped through. 79 00:06:21,990 --> 00:06:25,940 The created component is the render function. 80 00:06:26,220 --> 00:06:31,320 So let us begin our brother to see this updated this update. 81 00:06:31,500 --> 00:06:35,070 OK, as you can see, the component is mounted. 82 00:06:35,400 --> 00:06:44,700 And instead of this function, we have updated our status and directly, it's called a render function. 83 00:06:44,700 --> 00:06:50,550 And here we have dismasted that creates the components is in the render function, OK? 84 00:06:50,880 --> 00:06:59,610 And we pass in they created in the return function because the render function will render this update 85 00:06:59,970 --> 00:07:07,260 to the dome in order to be displayed again in our browser without reloading the page. 86 00:07:07,470 --> 00:07:10,860 And here, here the created components is displayed. 87 00:07:10,860 --> 00:07:12,840 So letters displayed. 88 00:07:16,520 --> 00:07:17,940 Ladies, please. 89 00:07:18,290 --> 00:07:27,290 Yes, like this, and there it will be displayed again because for the first time we we we had another 90 00:07:27,290 --> 00:07:35,110 value and once we did OK, it must automatically reload our browser. 91 00:07:35,190 --> 00:07:38,830 OK, so it's automatic reload. 92 00:07:38,840 --> 00:07:41,090 That is where the Newville is. 93 00:07:41,100 --> 00:07:46,670 You can see we have stepped through the creative component is there in there and the created component 94 00:07:46,670 --> 00:07:47,560 is displayed. 95 00:07:47,720 --> 00:07:49,250 Very good start. 96 00:07:49,250 --> 00:07:52,610 Let us back in a visual studio calls his can see here. 97 00:07:52,610 --> 00:07:56,210 They don't need the update here. 98 00:07:56,450 --> 00:08:04,330 And you can see the state state function allows us to update your status, which is your class. 99 00:08:04,640 --> 00:08:05,060 OK. 100 00:08:06,100 --> 00:08:08,350 So after that's what we're going to do now. 101 00:08:10,180 --> 00:08:14,490 We are going to call the components did update. 102 00:08:14,640 --> 00:08:23,110 OK, because I have told you once your data, your state is updated, we cannot access to the components 103 00:08:23,110 --> 00:08:23,910 it updates. 104 00:08:24,040 --> 00:08:25,750 OK, so let us be OK. 105 00:08:26,170 --> 00:08:32,860 We are going to say see Dupee, that this component needs updates and components. 106 00:08:33,100 --> 00:08:36,760 Updates has two parameters. 107 00:08:37,240 --> 00:08:43,510 The first parameter is the Peugeot's Proops and the second is the pujas states. 108 00:08:43,680 --> 00:08:50,860 OK, if you try to make a console log of Cliff Proops like this. 109 00:08:54,790 --> 00:08:55,480 They does. 110 00:08:58,300 --> 00:09:02,260 Make also for the Peugeot's states.