In the next few videos, we're going to try to condense down some of the code inside of our app component.
They're going to try to, well, just remove some variables if we can.
We're going to try to extract a couple of variables in two separate helper functions and so on.
The first change we're gonna make around our app component is going to very simple and straightforward
in nature.
I want you to take a look at the on video select function right here.
This is a one line function.
And anytime we have a one line function callback, usually a good sign that we should probably just
try to provide that function in line to whatever prop it is going off to.
In this case, on video, select is being provided to the video list component rather than making a
separate on video select function.
We can probably just define that function or provide it in line right here instead.
And that hopefully will make our overall function component just a little bit easier to read and understand.
I'm going to find video list going to temporarily give myself a little bit of space here.
Just you can read this code very easily.
Rather than providing a separate function, I'm going to provide an in-line function, though.
Recall that on video Select is going to be given a video that the user just clicked on.
And then inside there, we're going to update our set selected video or just selected video piece of
state.
So we will call set selected video and provide that video.
So we can now remove the original function right here.
Okay, that looks good.
Now, when we look at this code right here, I want you to notice the pattern that we have.
We are receiving some list of arguments in this case, just one argument.
We then turn around and provide that exact list of arguments.
Again, in this case, just one argument to the set selected video function.
Anytime you see some code like this where you take one argument and just pass it directly through in
the same order to some other function, that is a sign that we could do a little refactor so we can
technically take this entire function, remove it and just replace it with set selected video.
Like, so this is a hundred percent equivalent to the code we just had a moment ago.
Well, we had a moment ago.
We're just taking one function or one argument and passing it directly through the what is the purpose
of making that erro function?
There is no purpose to it.
We can just provide that selected video.
And it's 100 percent equivalent.
We can out save this and then go back over and test it inside of our browser.
The back over here.
I still see everything up here.
I can click on a video.
It gets selected and I can play it.
All right.
Well, I'd say that looks pretty good.
OK.
That's one little change.
Now, obviously not a big change, but whatever, it's enough.
Let's take a pause here.
Welcome back.
Next video we're going to discuss making a much larger change or much larger refactor to our app components.