WEBVTT 00:01.900 --> 00:04.720 Okay, let's talk about state. 00:04.750 --> 00:13.180 Now, I mentioned state before and I said if you would like to use a state, then you need to go for 00:13.180 --> 00:21.790 class based component because in the functional component, as we use in a header here, we don't have 00:21.790 --> 00:23.290 option to use the state. 00:23.290 --> 00:30.100 So basically this is stateless components and the class based can contain a state. 00:30.130 --> 00:33.160 What is state and why this is used? 00:33.190 --> 00:41.080 Basically state is very similar to the props, but the props are immutable, so that means they cannot 00:41.080 --> 00:41.590 be changed. 00:41.590 --> 00:45.190 So I can't go just to this value here. 00:45.190 --> 00:51.160 And then like, for example, this trademark and change it because this is not allowed. 00:51.160 --> 00:57.730 So if we would like to have something in the component that will allow us to change and keep the state 00:57.730 --> 01:06.260 of this component, we need to use a state and in order to use a state, it is as simple as using keyword 01:06.260 --> 01:11.600 state like that and then equal to and curly brackets. 01:11.600 --> 01:20.390 So inside, inside state, this is our object of the data we would like to keep or maintain in within 01:20.390 --> 01:21.680 this component. 01:21.680 --> 01:27.320 So basically what we can have, we can have, for example, text, whatever we can call it, whatever 01:27.320 --> 01:33.200 we like and let's say call it name like that, and I will put my name here. 01:34.220 --> 01:42.920 So what I have instead, I have a piece of information and I have name called Christian, and that state 01:42.950 --> 01:50.030 stays with my component so I can reuse it and I can do something about it. 01:50.030 --> 01:56.750 So I will use this input as we have it here for a show you how the state works. 01:56.750 --> 02:04.940 So basically what we can do is we can assign our move this to next line and here I will do a value. 02:05.480 --> 02:15.440 So this value will be this state, and then I will do dot and you can see here name is one of the property 02:15.440 --> 02:16.340 I can use. 02:16.370 --> 02:19.010 This is the name here. 02:19.010 --> 02:27.440 So what I can do here is similar way as we do with this props and this props coming from outside to 02:27.440 --> 02:28.190 our component. 02:28.190 --> 02:34.790 But this state is inside, so this state name will be the value of this input if I will save it now. 02:36.190 --> 02:42.160 You can see here, Christiane is printed inside our insert field here. 02:42.160 --> 02:44.680 So it's still working the same way as we've done. 02:45.040 --> 02:49.570 You can see here it's been changed and this is a trigger. 02:49.570 --> 02:52.390 But this time we call this value here. 02:52.390 --> 02:57.720 So let's say we would like to update this value state whenever we change something. 02:57.730 --> 03:00.490 You can see here, change has been. 03:02.470 --> 03:03.070 Trigger. 03:03.070 --> 03:04.720 So this function is trigger. 03:04.720 --> 03:09.490 But if I will type in here, I can see here it's incrementing, but not in. 03:09.490 --> 03:10.370 It's changing. 03:10.390 --> 03:11.380 Why is that? 03:11.380 --> 03:15.040 Because the state is like that. 03:15.040 --> 03:19.900 So it stays Christian all the time and we pass it value here there. 03:19.900 --> 03:27.190 So even if we change it, it come back to this state because the state stays as it is here. 03:27.640 --> 03:28.780 So nothing's change. 03:28.780 --> 03:35.500 What do we need to do is we need to pass some information to this change, which is this function and 03:35.500 --> 03:39.610 then we need to use it and change the state. 03:39.610 --> 03:41.500 So we'll do that. 03:41.500 --> 03:44.350 But I will show you we will have some problems. 03:44.770 --> 03:53.350 So first thing is that if I will pass values like this, it will be trigger automatically. 03:53.350 --> 03:56.280 I mentioned that before, so we can't really do this. 03:56.290 --> 03:59.470 Another option is to use the event. 03:59.470 --> 04:07.090 So if I will go name it event like this and I will try to print it here. 04:10.680 --> 04:11.790 I will save it. 04:14.120 --> 04:21.740 And you can see here I have synthetic event there and I can have all the information for that event. 04:21.740 --> 04:25.220 So I have event, a target and so on. 04:25.250 --> 04:33.020 The problem becomes when we would like to use at this inside this function, if I would like to refer 04:33.020 --> 04:36.260 to this class, which is I need to refer to the state. 04:36.260 --> 04:43.400 So if I would like to use this state name, for example, if I will duplicate this and I would like 04:43.400 --> 04:44.180 to do. 04:46.170 --> 04:50.610 This state and then name like that. 04:50.640 --> 04:53.340 This will I will disable this for a moment. 04:53.490 --> 04:56.130 And if I would like to do that now. 04:58.970 --> 05:07.460 You can see here an error and this this error is cannot read property state of undefined because this 05:07.460 --> 05:08.840 is undefined. 05:08.870 --> 05:12.350 This refers to this function and not this class. 05:12.350 --> 05:21.080 So what we will need to do is we need to bind this to this function and there is a few ways we can actually 05:21.080 --> 05:21.650 do this. 05:21.650 --> 05:26.750 So you could do this change and then you can do bind like that. 05:26.750 --> 05:27.710 Bind. 05:30.360 --> 05:30.960 This. 05:31.650 --> 05:33.930 So basically what is doing that? 05:33.930 --> 05:37.560 So I can do that and you can see it's working again. 05:37.560 --> 05:43.380 So you bind this, which is the class into this, but the syntax is quite horrible. 05:43.380 --> 05:46.950 So I am not going to use this syntax. 05:47.460 --> 05:47.870 Now. 05:47.910 --> 05:50.400 Another option will be to use the constructor. 05:50.400 --> 05:58.200 You can go constructor and inside the constructor you can bind this change to this class, but the syntax 05:58.200 --> 05:59.700 is even more terrible. 05:59.700 --> 06:01.710 So I'm not going to use this. 06:01.740 --> 06:04.800 Another option will be to use the arrow functions. 06:04.800 --> 06:08.250 So this is normal function with a normal syntax like that. 06:08.250 --> 06:10.740 But we can also use the arrow function. 06:10.740 --> 06:16.320 Arrow function are very similar to this function, but we need to change it to so change. 06:16.320 --> 06:20.460 This was the name of our function and it will stay the same as it is. 06:20.490 --> 06:27.090 And then we pass some argument arguments and then we do equal and then greater than sign. 06:27.090 --> 06:28.990 So we create kind of arrow. 06:28.990 --> 06:33.070 And this is basically the same as the function word. 06:33.070 --> 06:40.330 So the syntax is a little bit different, but this time we will have an access to this without binding 06:40.330 --> 06:40.810 this. 06:40.840 --> 06:46.600 So if I will save and then use it here, you can see it's working again. 06:46.600 --> 06:48.460 So using this kind of syntax. 06:48.460 --> 06:54.640 So we have name of our variable variable and we name it the same way as we name the function before 06:54.640 --> 06:59.110 and then equal and that's our arrow function. 06:59.110 --> 07:04.360 So it will be the same as the syntax function 07:06.610 --> 07:07.360 like that. 07:07.360 --> 07:12.010 But that will throw an error because the function has no death inside. 07:12.010 --> 07:15.340 But using arrow function like this, we can use it. 07:15.340 --> 07:17.500 Actually we don't need those. 07:17.620 --> 07:21.430 But this is a single argument, so it looks a little bit weird. 07:21.430 --> 07:24.610 But once you get used to it, it's fine. 07:24.610 --> 07:30.930 So we have console.log state name and you can see here this is printed, so I will read remove it. 07:30.930 --> 07:33.780 And for now and let's go back to our change. 07:33.780 --> 07:36.570 So what is available on our event? 07:36.600 --> 07:41.160 We can go target and then we can go value like that. 07:41.160 --> 07:48.900 So I will do change and then value if I will save it now and then I will try to type in something. 07:48.900 --> 07:55.020 You can see at the very end of this we'll have a change to the OSL and so on. 07:55.020 --> 08:04.620 This is what I type in here, but it still stay and go back to the normal state because we put it here. 08:04.620 --> 08:10.320 The value, even if we change it and we have a new value, we pass it here and it reset back to the 08:10.320 --> 08:11.700 value of this state. 08:11.700 --> 08:16.320 So what we need to do is every time we change it, we need to update the state. 08:16.320 --> 08:25.860 So normally the intuition is telling us, okay, we know how to update this state and then name is equal 08:25.860 --> 08:30.100 to something and then we can get the value from here. 08:30.100 --> 08:32.590 But this is not a proper way to do it. 08:33.310 --> 08:39.490 And so if we will do like that, it's not a proper way to do it because we should not access the state 08:39.490 --> 08:41.340 like this, set the state. 08:41.380 --> 08:44.110 We should use a proper function for this. 08:44.110 --> 08:50.620 So instead of that, we can do this set state and that's a function. 08:50.620 --> 08:52.750 And inside here we can pass it. 08:52.750 --> 08:56.800 So we do object and then we can do name. 08:58.700 --> 09:00.920 And then this value. 09:00.950 --> 09:09.620 So what I'm doing here is I'm getting this new value, which will be already with my new letter. 09:09.620 --> 09:12.830 And then I set the stage of this. 09:13.220 --> 09:16.170 I set the state of name to this value. 09:16.190 --> 09:20.060 So if I will save it now and then I will do. 09:20.060 --> 09:25.130 Christian you can see I'm updating the state. 09:25.130 --> 09:30.230 So if I will go, if I will take this. 09:36.640 --> 09:37.600 And put it here. 09:37.600 --> 09:38.650 I can do. 09:40.780 --> 09:49.780 Let's print out this state and then name like that. 09:49.870 --> 09:52.150 So I'm trying to print a state. 09:52.180 --> 09:52.780 Now. 09:55.510 --> 09:59.790 You can you can see here this is a printed. 09:59.800 --> 10:05.200 So my state is changed and we trigger that here. 10:05.200 --> 10:12.970 So we do this set state and then what property I would like to change and then the value of that property. 10:12.970 --> 10:16.300 And this value is coming from this event which is on change. 10:16.300 --> 10:19.600 So we pass this value to the function. 10:19.600 --> 10:21.820 This function set a state in here. 10:21.820 --> 10:31.120 So in fact in state we can have local variables and local state that we will do something about it. 10:31.120 --> 10:33.640 So the functions are stateless. 10:33.640 --> 10:41.170 They don't have a state and they can't contain a dynamic information and the class based components 10:41.170 --> 10:42.550 can have a state. 10:42.580 --> 10:45.700 In fact, we don't need to restrict to just one. 10:45.700 --> 10:51.880 We might have multiple so we can have age and so on and so on. 10:51.880 --> 10:58.790 So basically the state is the way to hold our data in the component and do something about it. 10:58.790 --> 11:07.700 So whenever we would like to refer to our state, we do this state and the name of the this variable, 11:08.060 --> 11:09.980 which is this. 11:09.980 --> 11:15.650 And then if we want to change it, then we use the function, this set state like that. 11:15.650 --> 11:19.790 And this is the way to handle the information inside our components.