WEBVTT 00:00.000 --> 00:00.300 Okay. 00:00.330 --> 00:03.720 So now we're going to take a look at component states. 00:03.720 --> 00:09.630 And when I say state I'm really referring to a piece of memory for this component so that we can add 00:09.630 --> 00:11.940 or remove products from our products list. 00:11.970 --> 00:16.290 Specifically, we're going to take a look at just adding new products into this list. 00:16.320 --> 00:18.870 We cannot do that with a hard coded array like this. 00:18.900 --> 00:21.120 We need something extra. 00:21.150 --> 00:26.730 Now in early versions of react, what we would have to do at this point is not use just a JavaScript 00:26.730 --> 00:27.150 function. 00:27.150 --> 00:35.640 Here, we would actually need a class to store states inside memory for a particular component. 00:35.640 --> 00:43.890 But since about react 16.8, react introduced something called React Hooks, which allows us inside 00:43.890 --> 00:50.370 a normal JavaScript function to hook into a part of react that does some clever stuff behind the scenes, 00:50.370 --> 00:57.150 so that react can reserve a piece of memory where we can track updates to state inside a component, 00:57.150 --> 01:03.150 and when that state is updated or something changes with that state, then the component itself can 01:03.150 --> 01:08.650 rerender and provide the updated states to the view in the browser. 01:08.650 --> 01:11.050 So let's take a look at how this works. 01:11.050 --> 01:15.310 Now, we did have a bit of react states when we first created a template. 01:15.310 --> 01:17.680 We had a counter and we saw that in action. 01:17.680 --> 01:21.940 But we're going to do something similar for the products in this case. 01:21.940 --> 01:29.590 So in order to use states then we create a or use a use state hook. 01:29.590 --> 01:34.450 So we do this by providing a const open square brackets. 01:34.450 --> 01:39.310 And we'll set this equal to use state which we get from react. 01:39.340 --> 01:43.450 Now VS code is very good at automatically importing stuff nowadays. 01:43.450 --> 01:47.920 And we can see that this import of use state has come in from react. 01:47.920 --> 01:49.090 So that's what we need. 01:49.360 --> 01:51.790 And this use state hook. 01:51.820 --> 01:55.690 It returns a stateful value and a function to update it. 01:55.690 --> 01:59.260 So the stateful value is going to be a list of products. 01:59.260 --> 02:02.860 That's what we put in the first part inside the square brackets. 02:02.860 --> 02:05.860 And the function to update it is the second part. 02:05.890 --> 02:08.150 So we'll say set products. 02:08.150 --> 02:12.920 So we've got the ability to get the products effectively using this and set them. 02:12.920 --> 02:17.180 And we can also give our states an initial value as well. 02:17.180 --> 02:25.130 And for the initial value of this state, I'm just going to copy the list of products and put it inside 02:25.130 --> 02:27.320 the parentheses for the use state. 02:27.320 --> 02:31.850 And let's remove what we have hardcoded above the function. 02:31.850 --> 02:38.450 And let's also just remove the third one which is a duplicate of the second one. 02:38.960 --> 02:45.290 So if we want to add something to this array of products then we need to use the set products function. 02:45.290 --> 02:53.690 So let's create a helper function inside here I'm going to say const add product and say equals parentheses 02:53.690 --> 02:54.470 equals. 02:54.470 --> 02:59.630 And we're using an arrow function here I'll come back and explain the syntax of this. 02:59.660 --> 03:05.210 And the idea of this is well there's two ways of creating functions really. 03:05.210 --> 03:07.670 There's this approach the arrow function. 03:08.000 --> 03:10.160 And we specify a const. 03:10.180 --> 03:11.950 Give the function a name. 03:12.490 --> 03:14.380 This part here with the parentheses. 03:14.380 --> 03:18.970 The empty parentheses is any arguments we wish to pass to this function. 03:19.060 --> 03:24.370 And then we use an arrow and open curly brackets for the body of this function. 03:24.400 --> 03:29.320 Alternatively, we could also just use a normal function and say function add product. 03:29.590 --> 03:32.530 And then just use parentheses and create a function. 03:32.530 --> 03:36.520 This way both ways are going to achieve exactly the same thing. 03:36.610 --> 03:42.940 My small preference, and it is a very small preference, is just to use arrow functions inside react 03:42.940 --> 03:43.810 components. 03:43.810 --> 03:47.290 Typically you may see me doing something slightly different later on. 03:47.290 --> 03:51.040 I'm not 100% consistent on this and it really doesn't matter. 03:51.070 --> 03:53.050 You can use normal functions if you want. 03:53.080 --> 03:55.450 I'm going to go for arrow functions in the main. 03:55.450 --> 03:59.560 So inside here then we're just going to use the set products. 03:59.560 --> 04:02.830 And what do we put inside here. 04:02.830 --> 04:07.780 Well since we're not going to take an argument let's just add a product inside here. 04:07.780 --> 04:13.830 So with the set products then what we can do is and this isn't ideal. 04:13.830 --> 04:14.910 I'll just show you this approach. 04:14.940 --> 04:18.240 First of all, and then I'll show you a better approach. 04:18.240 --> 04:25.560 But what we could do is use something called a spread operator, and we could pass in as the argument 04:25.560 --> 04:28.740 the products that we already have inside state. 04:29.400 --> 04:35.190 And then after the spread operator, then we could add our new products, and I could give this a name 04:35.190 --> 04:43.140 and say product three and I could give it a price and let's just say 300.00. 04:43.620 --> 04:48.150 And I'm getting a warning here because I've created this function but not used it anywhere. 04:48.180 --> 04:52.590 Now, I said, this is not great what we're doing here, but it should still work. 04:52.680 --> 04:56.250 And I'll come back and correct it with a slightly different approach soon. 04:56.640 --> 04:57.900 So where do we use this then? 04:57.900 --> 04:59.850 Well, we need a button of course. 04:59.850 --> 05:01.980 So let's just below the unordered list. 05:02.010 --> 05:03.660 We're just going to add a button. 05:03.660 --> 05:06.480 We'll give it an onclick event. 05:06.480 --> 05:09.840 And then we can use our add product method. 05:10.320 --> 05:16.320 Now inside an onClick event it might be tempted to add parentheses here because that's typically how 05:16.320 --> 05:17.660 we call a function. 05:17.750 --> 05:25.940 But in this case, what we want to do is defer the execution of this function until the onClick event 05:25.970 --> 05:26.630 has been. 05:26.660 --> 05:29.030 Well, the button has actually been clicked. 05:29.060 --> 05:33.980 If we provide the function in this way, and we are getting a warning about this, telling us that, 05:34.010 --> 05:39.890 hey, this isn't good, it's because this is being executed as soon as this component is rendered and 05:39.890 --> 05:41.090 we don't want that. 05:41.120 --> 05:45.800 We could do this and add parentheses and add an arrow function to call it. 05:45.800 --> 05:47.210 This is going to do the same thing. 05:47.210 --> 05:48.590 It's going to defer it. 05:48.590 --> 05:53.750 And if we were passing an argument to this add product function, that is how we would write the code 05:53.750 --> 05:54.350 inside here. 05:54.350 --> 05:59.930 But if we do not need to pass an argument to this function, then we can just say add product as it 05:59.930 --> 06:00.650 is. 06:00.650 --> 06:05.570 And then when the button is clicked, then that's going to call the add product method. 06:05.570 --> 06:07.850 And it's going to add that new product to the list. 06:07.850 --> 06:15.050 And because of the way the Usestate hook works, that product is going to be added to the state in memory. 06:15.080 --> 06:17.750 And then we should see it inside our browser. 06:17.750 --> 06:21.870 So let's go and take a look and we'll just refresh the page. 06:21.870 --> 06:24.690 Please bear in mind what I said about the hot reload. 06:24.690 --> 06:29.250 You may see errors and warnings like this in your Chrome dev tools. 06:29.250 --> 06:35.730 If you've got them open whilst you're developing and writing code, please do always just refresh the 06:35.730 --> 06:38.070 browser just to make sure the warnings go away. 06:38.070 --> 06:41.700 And if they do then it's not a problem. 06:41.700 --> 06:45.240 Now I forgot to give the button a label so I can barely see it on the screen there. 06:45.240 --> 06:51.600 So let's just say add products as the label of the button, go back to the browser and if I click the 06:51.630 --> 06:57.930 button, then what we see is the products being added and it keeps getting added added added. 06:57.930 --> 06:58.890 Great. 06:59.040 --> 07:02.070 So we have the ability to add products. 07:02.100 --> 07:08.280 But I mentioned that this was not a good use of the use state hook in this way, because I've just used 07:08.280 --> 07:11.940 the state here to give it the products. 07:11.940 --> 07:16.830 But what we really want to do is get into the existing state inside this method. 07:16.830 --> 07:23.780 We do have access to that, and the way that we access the previous state is before the square brackets 07:23.780 --> 07:27.500 there I can specify an argument and this can be called whatever we want. 07:27.530 --> 07:30.230 But just to be clear I'm going to call it previous state. 07:30.230 --> 07:36.860 And then we pass this as an argument to the function that we're using inside set products. 07:36.860 --> 07:39.170 So this gives us access to the previous state. 07:39.170 --> 07:43.100 And instead of dot dot dot products I can specify previous state. 07:43.220 --> 07:46.400 Now this spread operator is very useful. 07:46.400 --> 07:51.050 And this effectively spreads each element of the array. 07:51.050 --> 07:54.830 So instead of it being an array inside square brackets. 07:54.860 --> 08:00.530 Now after we use the spread operator it's going to have product one, product two. 08:00.560 --> 08:05.480 And then we're adding on product three inside these square brackets. 08:05.720 --> 08:12.140 So it's just a quick one liner way of adding something to an array in the way that we're doing it here. 08:12.140 --> 08:15.410 So what we should find is that the functionality doesn't change. 08:15.410 --> 08:16.490 It should still stay the same. 08:16.490 --> 08:21.650 If I just refresh the page again add product, add product, add product, then we can see that our 08:21.650 --> 08:28.510 state is being updated happening inside memory and it's causing our component to rerender and displaying 08:28.510 --> 08:32.350 the outputs from the event of adding the product on our browser page. 08:32.350 --> 08:34.180 And that's the result we're looking for. 08:34.210 --> 08:40.930 But let's further refine our use of the use state, because we've got a very hard coded product name 08:41.380 --> 08:42.940 and a hard coded price. 08:42.940 --> 08:47.260 So everything's product three and everything's priced at 300. 08:47.260 --> 08:52.840 So instead of that, we could just make use of the previous state to make this a bit more dynamic. 08:52.840 --> 09:01.360 And we could say the name we could concatenate and I'll say pref state dot length and say plus one. 09:01.810 --> 09:04.060 And let's move the price down there. 09:04.060 --> 09:10.990 And for the price instead of 300 here we could open parentheses and say pref state dot length. 09:10.990 --> 09:18.520 To get the length of the array multiply it by 100 and then plus 100. 09:18.790 --> 09:27.370 So effectively this is going to give us in terms of product three it should be 300 based on this calculation. 09:27.760 --> 09:31.220 And product four is going to be 400, so on and so forth. 09:31.250 --> 09:36.470 And if we go back and test again and let's just refresh the page and we add products, then not quite 09:36.500 --> 09:37.430 the result we're looking for. 09:37.460 --> 09:42.920 It looks like we've got the products being concatenated on with the one. 09:42.920 --> 09:45.440 And that's just a case of missing parentheses here. 09:45.440 --> 09:51.890 So if I just highlight all of the previous dates we don't want to concatenate one onto this. 09:51.890 --> 09:56.180 We want this to be a calculation of the previous state length plus one. 09:56.180 --> 10:01.070 And if I go back and I refresh the page again what we should have is product three, product four, 10:01.070 --> 10:03.050 product five, etc.. 10:03.050 --> 10:05.480 So that's our first hook we're going to take a look at. 10:05.480 --> 10:08.510 So we'll use it often in this training course. 10:08.510 --> 10:14.090 And another hook that we need to take a look at is so that we can do something when our component is 10:14.090 --> 10:19.670 mounted or when our component loads, then we want to introduce a side effect. 10:19.670 --> 10:20.540 When that happens. 10:20.540 --> 10:26.810 And the side effects that we want to happen is we go out to our API and we fetch the products. 10:26.810 --> 10:30.980 So instead of using our own products, here we go and get them from our API. 10:30.980 --> 10:33.380 And we're going to take a look at that next.