WEBVTT 0 00:00.290 --> 00:00.610 All right. 1 00:00.630 --> 00:04.230 So here's the solution to the challenge from the previous lesson. 2 00:04.260 --> 00:10.380 First I'm gonna comment out the code from the previous lesson. And then I'm going to import this constant 3 00:10.380 --> 00:13.060 called cars from practice.js. 4 00:13.080 --> 00:26.890 So let's go ahead and export it as the default and then import it just below all the other ones. 5 00:26.920 --> 00:27.200 All right. 6 00:27.220 --> 00:33.760 So now that I've got access to this array called cars, let's start off by just logging it and see what 7 00:33.760 --> 00:44.340 it looks like in the console. You can see it's an array with two items inside both are objects and then those 8 00:44.340 --> 00:50.840 objects have loads of properties and nested objects and nested arrays. 9 00:50.850 --> 00:54.270 This is starting to look a bit like the kind of stuff you get back from APIs 10 00:54.270 --> 00:54.540 right? 11 00:55.560 --> 00:58.830 So how can I get this code to work? 12 00:58.830 --> 01:02.940 So the first thing that my table shows is the actual model 13 01:02.940 --> 01:03.600 /ight. 14 01:03.690 --> 01:07.560 And I've got in my object this thing called model. 15 01:07.560 --> 01:11.760 So how can I pull it out so that I can use this syntax? 16 01:11.760 --> 01:18.150 Well let's first destructure our cars array so that we have some variable names assigned to the first 17 01:18.210 --> 01:19.900 and second items. 18 01:20.010 --> 01:25.350 My first object in the array is my Honda and my second object is my Tesla. 19 01:25.740 --> 01:33.720 So I would love to give each of these objects their own variable names and I can do that using de 20 01:33.720 --> 01:34.830 structuring. 21 01:34.980 --> 01:42.030 So I'm going to create a new constant which is going to be an array destructure and I've got the first 22 01:42.060 --> 01:44.680 item in my array was the Honda 23 01:44.850 --> 01:49.950 and the second was the Tesla. And I'm going to set it to equal that array of cars. 24 01:50.520 --> 01:56.460 So now as soon as I've done that, you can see that some of my code the error has gone right? 25 01:56.460 --> 02:04.670 It now recognizes Honda.model and Tesla.model because now I've got access to these variables. 26 02:04.710 --> 02:11.430 So Honda is going to output the entire Honda Civic object. 27 02:11.460 --> 02:13.690 Now let's address the next step, 28 02:13.830 --> 02:15.870 the top speed. 29 02:15.870 --> 02:22.170 So we know that the top speed lives inside another object called speedStats. 30 02:22.620 --> 02:26.080 So we have to destructure this a little bit further. 31 02:26.280 --> 02:34.520 So let's create a constant and let's destructure the Honda or Tesla object. Let's say that we have access 32 02:34.580 --> 02:35.690 to this object 33 02:35.690 --> 02:40.980 now Honda. How can we get hold of this top speed? 34 02:41.000 --> 02:48.680 Well we first have to dive into the speedStats and then we have to get hold of the top speed. 35 02:48.770 --> 02:55.060 Let's go ahead and set this constant equal to Honda and destructure 36 02:55.080 --> 03:03.290 firstly these speedStats property and then we're gonna add a colon and a set of curly braces. 37 03:03.290 --> 03:10.310 Now inside these curly braces we're going to destructure the object that is stored inside speedStats 38 03:10.400 --> 03:11.500 a little bit further. 39 03:11.720 --> 03:15.420 So we know we've got something called topSpeed in there. 40 03:15.560 --> 03:19.550 We can pull out both top speed and the zeroToSixty 41 03:19.610 --> 03:26.920 if you want to, although in our case we actually only just need the top speed. And instead of calling 42 03:26.920 --> 03:32.100 it topSpeed we're going to use that trick we learned about renaming it. 43 03:32.230 --> 03:34.530 Let's go ahead and call it honda 44 03:34.570 --> 03:37.050 TopSpeed. 45 03:37.410 --> 03:43.470 And so this line of code no longer has any errors. But we don't have one yet for Tesla. 46 03:43.530 --> 03:49.050 So let's go ahead and repeat the same thing for our Tesla. 47 03:51.810 --> 03:57.420 And now if you actually look at what's being rendered, you're already seeing our brand is being pulled 48 03:57.420 --> 04:03.750 out or rather probably should be better called model, our top speed is being shown for both of the models 49 04:04.350 --> 04:08.130 and now the last one we want to do is the top color. 50 04:08.160 --> 04:13.380 So we've got this property called coloursByPopularity and we want to get hold of the black for the 51 04:13.380 --> 04:19.440 Honda and the red for the Tesla to be shown in our table. But in the starting versions of the code you 52 04:19.440 --> 04:25.920 should be looking at something that looks like this where we need to get a specific variable name called 53 04:25.920 --> 04:26.950 teslaTopColour 54 04:27.180 --> 04:29.190 and hondaTopColour. 55 04:29.190 --> 04:37.050 So over here we're going to create a new const that is going to destructure our cars and we're going 56 04:37.050 --> 04:45.360 to pull out this colorsByPopularity from our Honda first just in the same way that we've done over 57 04:45.360 --> 04:50.160 here with the speedStats. But we're going to dig into this a little bit further. 58 04:50.180 --> 04:56.850 So we're going to add a colon and then we'd be able to get access to the array of colors. 59 04:56.850 --> 05:04.410 And if I want to give the first color a name, then I simply do the same thing as I would with normal 60 05:04.410 --> 05:10.890 re-derestructuring where I get to specify a variable name for any of the items in the array. And in our 61 05:10.890 --> 05:15.170 case we'll call it hondaTopColour. 62 05:15.180 --> 05:25.680 And now if I repeat this for the Tesla and change this to teslaTopColour, then you'll see that my table 63 05:25.740 --> 05:31.870 now shows the most popular color for Tesla and the first item in that array for Honda. 64 05:31.890 --> 05:35.890 So if you didn't manage to complete the challenge it's time to go back and review it now. 65 05:35.940 --> 05:40.060 But if all of this is pretty clear then head over to the next lesson. 66 05:40.110 --> 05:45.080 We're going to be looking at some more complex ways of using that useState 67 05:45.140 --> 05:47.750 hook. So all of that and more, 68 05:47.820 --> 05:48.190 I'll see you there.