All right.
And when it comes to register, the first thing I want to do is grab this import from the Readme.
Now, of course, if you want, you can type it.
But since I want to save a little bit of time, I'm just going to grab this import.
Now, the other two we should already have in the register.
So first of all, let's navigate to a register page.
Now at the moment we have the link, so let me just replace it.
We're looking for form element.
We're going to use this redirect as well as use navigation.
And pretty much whenever you think of action, think of a function which will allow us to nicely and
smoothly handle the form submission.
Now we have multiple ways how we can set up the action.
And one of the ways is to essentially set it up where we have all of the routes.
So what am I talking about?
I'm going to go to App.js.
Then we're looking for Register page and yes, of course they need to match since we're going to submit
the form in the register page.
I mean, you also need to look for the same page over here and then there is an action property and
we want to set it equal to a function here.
And effectively, every time we'll submit the form, we will invoke this function.
Now, for now, I'm not going to be particularly original and I'm just going to go here with Hello there.
Now, one major thing we need to keep in mind.
We always, always, always, always need to return value from this function.
Now that value can be anything.
It can be an error.
It can be a redirect to a different page.
It can be null.
But if you won't do it, you'll get an error.
And in this case it's going to bubble up to our global error page.
So for starters, let me just go here with the return null and in the process I'll show you the error
as well.
So that's the first step.
We want to set up the function and as a side note, eventually this function will be in our page because.
Is just easier to work that way.
So once we have the action in place, we want to go back to our JSX, back to our return, and we want
to replace the form element with a form component.
So this is a form component coming from React router Dom.
Now, when it comes to CSS, when it comes to the elements that are displayed on the page, it's still
going to be form.
But once we use this form element, we'll be nicely able to use the action.
The first thing we want to pass over here is the method and I'll discuss the other option, the get
one once we get to the search functionality.
For now, since we're going to be sending a post request, yes, essentially we want to tell React router
that and therefore we're going to go over here with method dot post.
So if you don't provide this method, then the default one is going to be get, which we will discuss
later and the same goes for action.
We will use this when we set up delete functionality.
So let's not worry about it right now.
Long story short, whenever you have a post request, make sure that the form component has method equals
to a post.
Now let's save it and let's just navigate to a browser.
Register over here.
Notice, submit.
And if everything is correct, you'll see over here.
This.
Hello there.
And let me right away showcase the error you're going to get if you won't return a value from the action.
Now, I'll just comment out because I will use it and check it out once we click notice how we navigate
to our error page.
Correct.
And it's not 404.
So remember when we were setting up the error page?
We actually set up the condition.
And you know what?
Let me log the error because it will clearly tell you right away.
Notice you defined and for some reason I clicked away.
You define an action for root, but it didn't return anything from action function.
So it nicely tells us, hey listen, you need to return some kind of value.
Again, there are multiple variations and at the end of the day you can simply return null.
But you must, must, must return something.
Otherwise it's going to trigger the error.
And last thing I want to showcase in this video, I mean, yes, you can definitely set up all your.
Actions essentially in the app or where you have all of the routes.
But a quite common approach is to set it up here in the register exported and at least in my opinion,
that way it's easier to troubleshoot and grasp the entire functionality.
So you have your component here and you have a function which will take care of the form submission.
But just keep in mind and don't be surprised if you see actions written in such a way as well.
Essentially, here's what I want to do.
I want to navigate back to a register and I'm just going to come up with the function name.
Now.
I'm usually not particularly original and I just go with export const, and I call this action.
Now I will right away set it up as async for two reasons.
First of all, we'll need await to grab the form data, something that's coming up and also we'll make
the request.
So therefore we want to go here with async.
Let's go here with data just to showcase what you're going to have from React router Dom and let's just
make sure that this is null.
So since we're exporting from the register, we can nicely go to app.jsx X You know what?
Let me also add that console.log, just so you don't think that I'm messing with you or you know what,
we'll log something else.
We will log the data here.
My apologies for detour.
Just thinking here on the fly.
And then since I'm exporting this back in the app.jsx, I want to go where I have the import.
So above the default theme, we want to go with import since it's a named one, of course we want to
go here with action.
But keep in mind that.
We can only have one variable name per file.
So if you're importing ten actions, you'll have to come up with some aliases.
And that's why we'll right away say, Hey, we're importing an action, but the alias is going to be
a register action.
And where is it coming from?
Well, now we want to look for the page.
Correct.
So we're going to go to pages and then we're looking for register and then let's scroll down and where
we have.
Set up the function.
I'll simply go with.
Register action.
So now let's navigate, I guess, to the browser.
Let me refresh.
And check it out once we submit.
Notice by default, we right away get the giant object with a bunch of properties and options.
And of course we will utilize this object in order to collect the values that are being submitted.
And of course, we'll also eventually set up the request back to our server.
And essentially we will create the user.