In the last section where you've successfully executed a youtube search by using our API key and the 2
search term surfboards. 3
So let's continue in this section by doing a pretty close examination of our app component right. 4
Here we go any farther. 5
I'm going to clean up the components in here just to clean things up a little bit. 6
You can certainly leave the comments if you want to. 7
Animals are going to condense everything in here. 8
OK. 9
Looks a little bit better now. 10
OK. 11
In this section we're going to start by refactoring the app component from a functional component to 12
a class based component. 13
We're going to do this to make sure that the app can keep track of the list of videos where it's going 14
to keep track of the list of videos by recording them on its state. 15
So remember whenever we start to use state we want to be able to where we need to have a class based 16
component and we want to state here because this is some amount of data that's going to change over 17
time and we want it to persist throughout the application. 18
You know it's lifecycle. 19
OK. 20
So we'll go ahead and get started and this refactoring process is going to probably very quickly you're 21
gonna get used to it very quickly. 22
So at the very top we first need to import the component object so we can extend from it. 23
So we'll add component like so next. 24
Instead of defining a concept we'll define a class and it's going to extend component and then we're 25
going to add a render method. 26
So we'll do it in there and close the curly braces like so. 27
OK. 28
So this is looking pretty good. 29
This shouldn't break going from a functional component to class based components can break anything 30
. 31
So I want to save this and let's do a quick refresh and it looks like I did make a mistake. 32
Let's see if we can't find what it is. 33
Looks like I used extend instead of extents. 34
If you ever make a syntax error by the way you can check the NPM start process and they'll give you 35
a very you know nicely formatted indication of exactly what went wrong. 36
So all right extends like so 37
and we're good to go. 38
Here's my input and I solved my counsel log for the videos. 39
OK. 40
So it looks good. 41
So our list of videos is going to be changing over time. 42
You know right now it's a list of five videos. 43
But as people search for data. 44
Or you know as the user type stuff in the search you want to update it with the new list of five videos 45
. 46
So data changing over time. 47
Well sounds like a great use for state. 48
Right. 49
So whenever a user enters some new search input we need to conduct a new search and set the results 50
of that search on state. 51
So that means that we're going need to set up our constructor function blad new line in here is call 52
a constructor constructor always gets called with props. 53
And we'll talk more about props here very shortly and then we'll call super with props like so and then 54
we're going to default our state here. 55
So we'll say this state equals an empty object. 56
So less time the way you state it was in the search bar and the property we used the name was turn. 57
That really you know was supposed to represent search term the property name of state here you know 58
whatever property name we use here is totally up to us. 59
But in general we want to have it you know be something that really makes sense in this case. 60
I think that calling it videos will probably make sense and it's going to be an array because it's going 61
to contain a list of videos a list of objects. 62
So now whenever our first pops up we don't really want to have a toy into list here right. 63
It'd be great if the user could really see some data pop up right away. 64
So to do that we're going to move this search function right here into the constructor 65
and then we're going to kill some new lines there like so. 66
OK. 67
So now whenever the app first boots up and we get an instance of app on the screen the constructor will 68
run right away you know because we make a new instance of app and that will immediately kick off a search 69
with the term surfboards then the function the callback function data will be called with the list of 70
videos. 71
So this right here is the opportunity that we're going to have you this callback function the success 72
rate here is our opportunity to update this state with the new list of videos. 73
So we'll call this set States videos as data cool. 74
This is looking pretty good right now. 75
But let's make one more small refactor instead of using the function key word here. 76
And you know flip it out to a fat arrow function instead song and delete the function key word and we'll 77
just use the fat arrow instead. 78
Besides that no other change. 79
All right. 80
So now notice that the object that we're passing to the object is the object we're passing to this starts 81
set state has a key of videos and the value is data. 82
And you know we've really got control over the name of that data argument. 83
You know this doesn't need to be data. 84
It can also be like foo or oranges. 85
Right. 86
We could also make it videos which really makes a lot of sense because it is an array of videos right 87
. 88
So when we have a objects like this where the key and the value are identical terms we can make use 89
of a nice little bit of six syntax to compact this line even more whenever we have a key and a value 90
where it's the same exact string. 91
We can actually condense this to just be curly braces. 92
And then the name of the variable when we're using ES6 this will get resolved as this Dotts set state 93
videos videos. 94
Again this is just something that we do a little bit of syntactic sugar just to clean up our code a 95
little bit and it only works when the key in the property are the same variable name. 96
You'll see this advanced syntax like this very frequently an example re-act apps. 97
You'll see stuff like this all the time so you know in general it might seem kind of confusing right 98
now but I highly recommend you start. 99
You know you try to at least give it a chance try to get used to it a little bit. 100
You'll really clean up your code in the long run. 101
OK. 102
So our app is looking pretty good now. 103
It's now a class based component. 104
We define the constructor function. 105
The list of videos on state sets starts as an empty array. 106
But the instant that the component is rendered it kicks off a search and when the search is complete 107
it will update the value of videos. 108
Does not state that videos with a new list of videos. 109
OK so we now have access to the videos on state. 110
Let's continue flushing out the app inside of video detail inside the next section.