React Router in Depth #10 – Forms & Actions

Hey all, in this lesson you’ll learn about the newer Form component from React Router and how we can use it with Actions to handle form submissions easier.

⭐⭐ Watch the whole course now (without ads) on Net Ninja Pro:
https://netninja.dev/p/react-router-in-depth

🐱‍💻 Access the course files on GitHub:
https://github.com/iamshaunjp/react-router-in-depth

🐱‍💻 React Tutorial:
On Net Ninja Pro –
On YouTube –

🐱‍💻 React Router Docs –
🐱‍💻 VS Code –


Or rather gang so another new feature in React router version 6.4 is the addition Of a farm component and also form Actions now just like loaders these Features only work when we're making Routes the newer way with that new Function create browser router and then Use a router provider to provide that Router in the template and these new Farm features are really really helpful Because they reduce the need for us to Track individual Farm Fields using local States and defense Handler functions so Whereas previously you might attach each Form field to an event handler to update Some local state for that field and then Bundle all of those field values Together when the form was submitted Inside some other submit event handler Now we don't have to do any of that all We have to do is use the react router Form component which will automatically Track all of those values for us and When we submit the form they will bundle Together all of those values into a Request object and pass it into an Action function function the action Function is something we have to make Ourselves a bit like a loader function But this time it gets access to all of The form data so that we can do Something with it so it just sometimes Makes working with forms that a little Bit easier in react so the way this

Works is first of all we need to delete This and replace it with the form Components From react router Dom right here so it's Auto imported that for us Now I need to update this at the bottom Form Now we add a couple of props to this and The first prop is going to be the method Well it's just going to be a post method And this is not actually going to send a Post request by the way this is all Going to be on the front end we're not Sending any request to the server react Router Dom doesn't do that for us it's Just a way of handling it on the front End and by specifying the method here When we create our action later we're Going to be able to access what the Method was on the form so we could use It there if we wanted to to then Actually send the post request I hope That makes sense So we have the method right here next we Also need an action prop now an action Is a special function that we're going To fire a bit like a loader but in this Case it's going to fire when the form is Submitted Now right here we don't specify like a Function name or anything all we do is Specify your route path so I'm going to Specify forward slash help and then Forward slash contact which is actually

The route of this page right Forward slash help forward slash contact And we see the contact component which Is what we're in now it doesn't have to Be this exact same route but what we're Going to do shortly is create a function And we're going to attach that function As an action property to a specific Route so we're going to say on this Route for example Action is equal to some kind of function And that's the function we're going to Fire when the form is submitted So what we're doing here is saying look Find the action associated with this Route so react router it's going to lock The routes for that route forward slash Help forward slash contact and it's Going to find the action function Associated with it refine that function Okay So let us create the function down here First of all and again you can create This function wherever you want you Don't have to create it in the same Component but that's just what I'm doing So we'll say export because we need to Import it in app.js shortly Const and it's going to be the contact Action and you can call it whatever you Want I'm just calling it contact action Because it's the contact form and we're Going to set this equal to an Asynchronous function

All right so As an argument here remember we get an Object and on that object we get a Request Property now this request property Contains all of the form data and by That I mean all of the input values or Text area values now for this to work You need to give name attributes to These different Tags the inputs or the text area Because we're going to use those name Attributes to access values down here Now the way we get access to that data Is by saying const data is equal to a Weight because this is going to be an Asynchronous method that we perform here Request which is the property on the Object we get right here and then we can Use a method called form data and that Gets us the form data Now From that we can access the individual Items or the individual values and the Way we do that is first of all I'm going To create a new object to kind of Represent our farm submission so I'm Going to call this submission Like so and set that equal to an object And we're going to have different Properties we have an email property Which is this one right here and we want To get the email value from this data And we can do that by saying data dot

Get and then we're going to get whatever The name attribute is in this case email So that will get us the value or the Email Now as a second property on here we'll Have the message and again we'll say Data.get this time the name attribute Was message This thing right here so we're going to Get that value And then what I'm going to do is just Log this to the console Console.log submission now in actual Fact What you'd probably do is get this and Make a post request to save it to a Database somewhere whatever in our case We're not doing that because I just want To show you how these actions work and How react router can gather up all the Information and we can access that in an Action function so we're just going to Log into the console for now but what We'll do is now register this function As the action for this route so we Called it contact action contact Oops contact Action And it should import at the top right Here yes it does So once more very quickly we have the Form component and we have this action Right here And in fact what we're going to do is

Just console.log the request object as Well so anyway we have this action and That looks for the action on that route Find this function so it fires it and it Sends in the information from the form On this request parameter right here I'll log in that to the console and then We're getting the data from that request Object we create our own object with These two different values and we get Those fields from the data and then we Log that to the console so let's see if This works All right so let me try this Mario at Netninja.com and then blah blah blah The message submit this and we can see Okay we're getting unhandled Throne Error and that's because we defined an Action but we didn't return anything but We'll deal with that in a second for now Notice over here we get first of all This request object which has all the Different things on it including the Method that was what we attached to the Farm component remember the URL and then These other things as well but we also Log that submission object with these Two values the email and the message so We know that that works but we have to Return a value inside these actions so Let's do that So we know this works but we did get an Error saying we need to return a value Okay now I'm going to do two things

First of all I'm going to return a Redirect so we'll just say redirect the User right here and we're going to Return something called redirect it's a Function and it comes from react router Dom so it's Auto imported for me And using this function we can just Redirect the user to another page so the Home page for example so we're going to Submit the form log this information and Then redirect them however sometimes What you might do is actually send your Post request right here send post Request right to some kind of API to Save it to a database whatever you want To do with that information On the server Now the server might come back with an Error and it might say something like Look the message isn't long enough so Show an error on this page so we're not Doing that check on a server but we can Do a little check here on the front end To kind of simulate that so what I'm Going to do is just check if the Submission Which is this object right here that we Created Dot message Dot length Is like less than 10 characters then We're going to do something and we need To return a different value remember at The end of whatever we do we return Something and I'm going to return an

Object and this is basically some data Then that we can get access to inside This component When we return an object so I'm going to Return an error property on this object That says message Must be over 10 cars long okay So if the submission message length is Less than 10 we return this and we're Going to access that in the template in A minute and it's not going to go Anywhere but if that's not the case We're just going to redirect them to the Home page So how do we access this data right here Inside this component if we return it Well we can use a hook called use action Data so I can say up here const Data is equal to use action data like so It's going to import it for me and Basically that gives us this object Right here that we return So now we can come down below the form Or rather in the form if we wanted to Below the button and we could say look Do we have data and also do we have an Error property on that data now if we Have both of those then we want to Output that error so A P tag and then Inside that will output the data dot Error which is just that message right Here so if we return an object with an Error we're not going to go anywhere

We're not going to redirect we're just Going to show that error on the form Otherwise we're going to redirect them To the home page So let's give this a whirl All right then so down here I'm gonna Say Mario at hello.com whatever and then Your message ABC so it's not greater Than 10 characters submit and you can See we get the error message down here Now now if I just add in a lot of other Stuff which is greater than 10 Characters now and then submit we should Be redirected to the home page after we See the updated value logged over here Submit and yep we do we see the value And we're redirected awesome so that my Friends is how we can use the farm Component and also actions in react Router

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *