All right. 1
So here's the solution to the challenge from the previous lesson. 2
First I'm gonna comment out the code from the previous lesson. And then I'm going to import this constant 3
called cars from practice.js. 4
So let's go ahead and export it as the default and then import it just below all the other ones. 5
All right. 6
So now that I've got access to this array called cars, let's start off by just logging it and see what 7
it looks like in the console. You can see it's an array with two items inside both are objects and then those 8
objects have loads of properties and nested objects and nested arrays. 9
This is starting to look a bit like the kind of stuff you get back from APIs 10
right? 11
So how can I get this code to work? 12
So the first thing that my table shows is the actual model 13
/ight. 14
And I've got in my object this thing called model. 15
So how can I pull it out so that I can use this syntax? 16
Well let's first destructure our cars array so that we have some variable names assigned to the first 17
and second items. 18
My first object in the array is my Honda and my second object is my Tesla. 19
So I would love to give each of these objects their own variable names and I can do that using de 20
structuring. 21
So I'm going to create a new constant which is going to be an array destructure and I've got the first 22
item in my array was the Honda 23
and the second was the Tesla. And I'm going to set it to equal that array of cars. 24
So now as soon as I've done that, you can see that some of my code the error has gone right? 25
It now recognizes Honda.model and Tesla.model because now I've got access to these variables. 26
So Honda is going to output the entire Honda Civic object. 27
Now let's address the next step, 28
the top speed. 29
So we know that the top speed lives inside another object called speedStats. 30
So we have to destructure this a little bit further. 31
So let's create a constant and let's destructure the Honda or Tesla object. Let's say that we have access 32
to this object 33
now Honda. How can we get hold of this top speed? 34
Well we first have to dive into the speedStats and then we have to get hold of the top speed. 35
Let's go ahead and set this constant equal to Honda and destructure 36
firstly these speedStats property and then we're gonna add a colon and a set of curly braces. 37
Now inside these curly braces we're going to destructure the object that is stored inside speedStats 38
a little bit further. 39
So we know we've got something called topSpeed in there. 40
We can pull out both top speed and the zeroToSixty 41
if you want to, although in our case we actually only just need the top speed. And instead of calling 42
it topSpeed we're going to use that trick we learned about renaming it. 43
Let's go ahead and call it honda 44
TopSpeed. 45
And so this line of code no longer has any errors. But we don't have one yet for Tesla. 46
So let's go ahead and repeat the same thing for our Tesla. 47
And now if you actually look at what's being rendered, you're already seeing our brand is being pulled 48
out or rather probably should be better called model, our top speed is being shown for both of the models 49
and now the last one we want to do is the top color. 50
So we've got this property called coloursByPopularity and we want to get hold of the black for the 51
Honda and the red for the Tesla to be shown in our table. But in the starting versions of the code you 52
should be looking at something that looks like this where we need to get a specific variable name called 53
teslaTopColour 54
and hondaTopColour. 55
So over here we're going to create a new const that is going to destructure our cars and we're going 56
to pull out this colorsByPopularity from our Honda first just in the same way that we've done over 57
here with the speedStats. But we're going to dig into this a little bit further. 58
So we're going to add a colon and then we'd be able to get access to the array of colors. 59
And if I want to give the first color a name, then I simply do the same thing as I would with normal 60
re-derestructuring where I get to specify a variable name for any of the items in the array. And in our 61
case we'll call it hondaTopColour. 62
And now if I repeat this for the Tesla and change this to teslaTopColour, then you'll see that my table 63
now shows the most popular color for Tesla and the first item in that array for Honda. 64
So if you didn't manage to complete the challenge it's time to go back and review it now. 65
But if all of this is pretty clear then head over to the next lesson. 66
We're going to be looking at some more complex ways of using that useState 67
hook. So all of that and more, 68
I'll see you there.