I've got my application running inside the browser, just running it right now inside of our new videos,
Dash Hoke's project, to make sure that the entire project still works as expected.
But I can still do a search up here or say, forest.
Look on results.
Played the video.
Yep, looks like everything still works as expected.
OK.
Remember, we really only have to make changes to the app component and the search bar.
The search bar is definitely an easier component to tackle.
So let's use that to get started.
Back inside my editor, I've already opened up the search bar, James File inside the components directory.
Now, really quick, make sure you are making changes to your new videos, Dash Hooks Project, not
the old videos project.
It would be great if you keep a record of the old videos project that use class components and the new
one that's going to use hooks.
Just you can compare and contrast the code on your own.
And then inside of this component, we're going to take a quick glance at the contents of this class
before we start to refactor it into a normal function component.
So as I look at this, I noticed right away that we're making use of state inside of here.
So as we refactor this into a function component, we'll definitely need to make use of the use state
hook.
However, search bar definitely does not make use of any life-cycle methods.
And because of that, we probably do not need to make use of the use effect hook inside of here.
Use effect is usually used inside of a function component to kind of emulate or simulate the use of
a lifecycle method.
So because we have no lifecycle methods, no need for any use effect took.
All right.
So then mind, we're going to import the only hook that we're probably gonna use inside of here, which
is you state.
Then at the top of the file, I'm going to declare a new function component called search bar.
So we are going to go through our class of search bar line by line.
And for every line of code, we're going to move it over into our function component and refactor it
as we go.
So we're gonna first begin with the state declaration right here.
So we need to make sure that we declare a piece of state inside of our function component.
All term.
And we want to tab a default value of an empty string.
So to do so inside of our function component, we'll put in term and set term.
We'll call you state and provide a default value of empty string.
And then going to delete that state declaration out of search bar.
Just remember that I've taken care of that line of code.
Next up, we're going to move over both of these event handlers.
Whenever we move event handlers into a function like this, remember, we're going to declare them as
functions inside the body of this function.
So we cannot just cut and paste these.
I can do that really quick thing and cut both them and paste them into our function component.
We cannot just do that and leave it right there.
We need to make sure that we adjust the syntax that it's properly syntax inside of a function.
So to do so, all we will have to do in this case is make sure that we put in the Konsta keyword in
front of both of those even handlers.
Then inside those even handlers, I'm gonna make sure I update the code for both them.
So in the case of en input change.
We have a call inside there to set state.
Well, of course, inside of a function component.
We don't have any idea of this, let alone set state if we want to update state.
We have to make use of the Seder that we got when we initialized a piece of state with the you state
hook.
So for on input change, we're going to delete that line inside of their.
And replace it with set term event target.
Next is our unformed simit, even handler, the inside of here.
We still want to prevent default on the event.
But now we are trying to call some prop function of unformed cement.
Right away, you'll notice that we've got a little bit of a naming collision here.
We need to receive a prop into this component called on form submit.
So if we do that right away.
Like, so we've now got a naming collision because we are receiving a prop called on form Simit.
And we also are declaring a function called on foreign cement.
We should probably change the name of this event handler right here.
So it does not conflict with the name of the prop that is coming into our component, going to change
the name of the event handler to on cement.
Very simple, very straightforward little change.
Then inside the body, that function, we can adjust the second line of code inside there.
So, again, we don't have any idea of this inside of a function component.
We should definitely remove it.
Then I d structured out the on forms, submit function of the props object.
We don't really need the reference to props right there.
We can delete it and we are left with just on forms simit.
Then finally, once again, no idea of this inside of a function component to get access to our term
piece of state.
We can simply refer to term that we will replace this dot state, dot term with just term.
OK.
Now, one last little change, we're going to go down to our render method.
I'm going to cut the entire return block out of here.
So from Rilly Return keyword all the way down to the closing parentheses of that J.S. X block.
I'm going to cut all that.
And then put it in at the very bottom of my function component.
So here's the function component down the very bottom.
I will paste in that return statement.
Now, we will go through this J.S. X line by line and update all the different references inside of
your accordingly.
So looks like the very first one is the form element.
We are providing an on cement prop so we change the name of that callback to simply on cement.
We're going to take that function and provide it to that prop that will delete this dot on form submit
and replace it with on cement.
Next up at our input element, we are providing a value prop.
There is no longer a this dot state dot term.
There is only term by itself.
Will update value.
And then four on change.
Remember, we just put together on input change right here.
We'll provide a reference to that function by putting in just on input change.
All right.
So that's it.
We just refactored from a class component to a function component by moving over all this code line
by line.
There's definitely one or two little three factors we could do inside of here just to improve the legibility
of the search bar component function.
For example, this Aulbach right here or this event handler of en input change is very, very short
rather than declaring a separate function.
We might decide to delete it and instead write that function in line or the on change handler of the
input element.
So if we wanted to do that, we'd put inside of your event.
And then set term event target value.
That is not strictly required, but it does help clean up our function component just a little bit and
make it easier to read.
So if you make that change again, you no longer need the on term change or on input change, whatever
we had called it, event handler to cleared up your separately.
All right, so now the last thing we're going to do is go down to the class component that no longer
has any code inside of it.
We can delete that thing entirely because we have completed our refactor.
Let's save this.
Go back over to our browser and we're just gonna make sure that everything works as expected still.
So I'll do a search again for Forest.
Yep, surge worked.
I can still select a video and play it.
Yes, that's one refactored down.
Let's take a pause right here and then start to refactor our app component in just a moment as well.