In the latest React router version, we can also get the navigation state.
So essentially we can check whether we're submitting the form, whether we are loading data, something
we're going to do a little bit later and some other cool things.
And in order to set it up, we want to grab the use navigation hook.
We'll get back the instance and in there there's going to be a state property.
Now, why do we want to use it?
Well.
Because I want to showcase that the request is taking place, and I'm going to do that by disabling
the submit button and also just showcase the different text if we are submitting.
So let's navigate to a register.
Like I said, we're looking for use navigation hook.
That's the one we want to import and we want to set it equal to an instance.
So we need to come up with a name.
In my case, I'm going to go with navigation.
Well, then let's invoke the hook, use navigation and I'll log it.
But I can right away tell you that we're going to be looking for navigation state and more specifically,
whether it's equal to submitting.
So let's go here with log.
Then navigation.
And then I want to create a variable I'm going to say is submitting.
So is submitting is going to be equal to navigation.
Then state something I'm going to showcase in a second and more specifically if it's equal to submitting.
So if.
The condition is true, then of course, this is going to be true.
If not, it's going to be false.
Then we'll navigate to our submit button and we want to disable it when?
Well, when the is submitting is true.
Correct.
Because we know that in that case, the request is taking place.
And then also we want to set up the ternary operator where we have the text.
And if it's the case, then we'll go with submitting dot, dot, dot.
And if not, well, then let's just go with good old submit.
Let's navigate back to the browser.
I will slow down the network just so it's easier to see.
Let me also guess.
Change it to headers or you know what?
I can just close it here.
And also, of course, we'll need to provide the values.
So in this case, it's going to be Susan, I guess.
Because remember, again, we need to make sure that all our.
Emails are unique and check it out once I click.
First of all, we'll see the entire thing in the console.
But also notice we have this disabled set and we were also showing that submitting.
And then if I take a look at the console notice, so this is what I'm getting back from use navigation.
This is the object.
And here the state is submitting.
Now before we submit a notice how the state was idle.
So we only do something if the state is equal to submitting.
And like I said, later on, we'll also check for loading to set up global loading and all that cool
stuff.
So for now, you know what?
Let me just go back to the normal setup because.
Usually I forget to do that and then the network is really, really slow.
And with this in place now, we can set up React Toast file library.