All language subtitles for 020 Preventing Possibly Unwanted Route Transitions with the _Prompt_ Component_en

Now let's actually stay on this form page.

If I'm the user of this page,

and I started entering something

like test and I started entering some text here,

but then I accidentally swiped back

or pressed the back button

then I just go away and all my state is lost.

Whatever I entered here is lost.

Now you might've noticed that on some web pages,

where you can enter data in a form

this is prevented by a prompt.

Which is shown to you asking you

if you really wanna navigate away.

So that as soon as you started working on that form,

you can't accidentally leave it.

And that's a behavior we also might want to implement.

And React Router also makes that very simple.

Cue implemented, we can go to this quote form component

where we have this form and we wanna do two things.

First, we wanna determine when the user starts working

with this form, for example, when this form gains focus.

Then as a second step, we wanna show a warning to the user,

if he or she tries to leave the page after

starting to work on that form.

Now to find out if the form is active,

we can listen to the on focus event here.

Or we can set this on focus prop

and then trigger some function when this form gains focus.

The form focused handler

could be the function which we wanna trigger.

So that's the functional connect here.

If I just console log focus here in this function

then you will notice in the dev tools,

that if I reload this page, we don't see focus.

But if I click anywhere on this form, then I do get this.

If I click into this input here

I do get focused, locked to the console.

So this is how this form then becomes active.

Now in this form focused handler, we now

wanna store that information that's this form was focused.

And we then wanna show a warning,

if the user tries to navigate away.

Now for storing information, that the forum was focused

we can use state.

We can import use state hook from react,

and add a new piece of state here in this component.

Initially, it's false maybe

because this is the ease entering state, maybe

set is entering because the users started entering data

or at least the user started working on that form.

Now one set is entering to true

if this form focused handler fires.

But then I'll set this to true

and change this state.

With that we now know once user is working on the form.

Showing a warning to the user,

when the user then tries to leave that form

maybe accidentally,

is then routered straight forward actually.

Because for this react router,

has a special component which we can use.

So from react router Dom, we can import something.

And that something is the prompt component.

This is a component which we can render.

And then this component will automatically watch

if we navigate away.

And if then a certain condition is met,

it will show a warning before it allows us to leave.

Now for this, we need to render this component.

And for that we can actually use a fragment

to wrap this card.

And then side by side to this card,

render this prompt component as a self-closing component.

Now prompt needs two props.

It needs a when prop where we pass in true or false,

to finding whether this prompt should be shown

if the user changes the URL or not.

And I wanna show it, if is entering is true.

And that should be is entering here by the way.

So is entering.

If is entering is true, then I wanna show this prompt

if the user tries to leave the page.

We can also set a message prop then,

which actually takes a function which should return a string

with the text we wanna show to the user

when he or she tries to leave.

This is a function because we get some location object here,

which holds information about the page

we're trying to go to.

This would allow us to include the path

we're trying to go to in this message

which we're showing.

But here I don't care about this location.

I'll just say are you sure you want to leave?

All your entered data will be lost.

And that's the message which I'll show to the user

when he or she tries to leave this page.

With that if we now save this,

if I reload this page and I go to a different page

this works. Because I haven't touched the form yet.

If I do touch the form though, and I then, for example,

click on all quotes, I do get this prompt though.

Here we see the message we entered.

And if I click cancel, we stay on this page.

Of course I can still leave by clicking okay,

so I can override this.

But I get this extra warning,

if I started working on the form

to ensure that I don't accidentally lose my entered data.

At the moment we just have a small flaw here, though.

Even if I do enter data

and click add quote, I'll get this warning.

And that's of course not the desired behavior.

And to ensure that we don't get this warning in this case,

we could, for example, add an extra click listener here

on this button which submits the form

and trigger to finish entering handler function

which we have yet to add.

And then define this extra function.

The finish entering handler function here

and here I then call set is entering and set this to false

so that I do not block transitions anymore.

And with that, if we save this,

now we can leave that page.

So if I do not click add quote

and the form has focus, I get the warning.

If I do enter something here though,

and I then click this button,

then I can navigate away.

Setting set is entering two false inside

of the submit form handler would not work

because that's a little bit too late.

This state update would not go through,

before we actually triggered a navigation action.

Because the navigation action will be triggered

in on add quote. So that's all one synchronous process.

It's one function in the end

and hence the state update would not be processed

before we try to navigate away.

That's why I'm using a separate function for that here

which triggers when the button is clicked

and therefore before we actually handle the form submission.

And with that we're also using this

prompt component react router gives us

to ensure that we prevent unwanted transitions.