Let's talk about the state hook, and this is the most common, most important hook out of all of them,
and if we check out the documentation, we see that the U.S. state is a hook, we call it inside a function
component to add some local state to it.
So this is exactly what we need.
So we need now the you state hook.
To replicate whatever we did in the constructor here to create the state.
So the way we do that is a little tricky, so hang with me here and then I'll explain exactly what's
happening.
We first declare a constant and in here we'll do a raid to structuring.
That is the use state hook is going to return for us.
Two things.
One is the robots.
Remember, this is part of our state, and the second thing is the function that changes this robots
and usually the standard naming convention is to say set with the name of whatever the state that we're
changing is.
So we'll say set robots.
So cost robots is the state now and robots is the function that changes this state.
So we're going to say equals use state, which we've imported from here.
And then in the new state, we give it the initial state.
So what's the initial state of robots?
Well, right over here, it's an empty array, so we just give it an empty array.
And again, this is a bit of a magic that's happening with react, this idea of hoax isn't a JavaScript
context.
It doesn't really exist in the JavaScript world.
Hooks are very specific.
So there is a bit of magic that's happening in this case.
We just need to understand that you state returns for us just by doing this.
It's going to return for us one a piece of state.
And second, the function that changes that state so we can change or name these variables, whatever
we want to describe our state.
So that's our first piece of state.
And then the next one is the search field.
So once again, I'll say const.
And what should we put here?
Well, the search will.
And then the function that changes the search field, so again, using the standard will do set.
Search field.
Is going to equal U.S.
State and what is the initial state while the initial state is an empty.
There you go.
That's it, we just recreated this part, except now our function has state, it has the robot state
and it has a search field state.
And you'll also notice that it's not in one big state.
Instead, we slice things.
So we have one state for robots and one state for search field, and we keep them separate.
Now, this initial state can be anything you want.
You see here how this does state was an object.
And if we wanted to, we could make this into an object.
But this is completely up to you and what state you want to have in your app.
Now, another thing that tricks a lot of beginners is this array de structuring, which is a new JavaScript
feature.
Essentially, what this allows us to do is it allows us to name our state whatever we want.
So even though you state returns for us a piece of state which will be an empty array initially and
a function to change the state by using a restructuring, we can customize our code and name it whatever
we want instead of the U.S. State Library that react gives us naming it in one way that everybody has
to use.
This is just simple array structuring to name our variables.
Now that we have a piece of state, well, forget about the component did mount for now, we're going
to go to the concert change event and we see here that instead of doing on search change, what we'll
do is remove this set state because we're no longer in a class and instead to change the search field.
All we need to do is say set search field.
So this that says state changes to set search field and this search field can be changed.
So in this case, because we just give it exactly what the change needs to be, we can just remove the
object here and just say event that target value is going to set the search field.
So we got rid of this.
And then what else do we have here?
This starts state here we no longer need because again, we don't have a state object.
Each robots and search field is already here.
So we can just remove this entire line because we already have access to robots and search field.
And then if we go here.
Robots stuff filter, we have that any more this around here?
No, everything should be good.
Let's save.
We see that set robots is assigned a value but never used.
And that is because we haven't implemented the component demand yet, but let's have a look.
If I go back to our app, it's loading because we haven't fetched anything.
But if I open up the developer tools.
And console and let's just log out over here.
Let's just do console, dot log.
Robots.
And then Hirshfield, if I save and go back, we see that we have an array and an empty string, so
we have state, we've created a state inside of our function using the use state hook that allowed us
to finally.
Do exactly what we did with a class component, but in a functional way, next step is to add the life
cycle Hooke's.
Again, remember what hooks our hook is a special function that lets you hook into react feature, we've
hooked in to the state feature of Riak so that we can create state.
The next part is to hook in to the life cycle events that we got with classes, but this time within
a function I'll see in the next one.
Papy.