Build a Budgeting App with React Router #8 – Handling Multiple Form Submissions

??? Visit Chris @ Coding in Public for more of his tutorials:
https://www.youtube.com/c/codinginpublic

???Get early access to his entire course now on Net Ninja Pro:
https://netninja.dev/p/budgeting-app-with-react-router

??? Access the course files on GitHub:
https://github.com/coding-in-public/react-router-budget-app

??? Live demo of the finished app:
https://codinginpublic.dev/projects/react-router-budget-app/

??? React Router in Depth Tutorial:
On Net Ninja Pro –
On YouTube –

??? React Router docs –
??? VS Code –


Welcome back last time we set up this Where we can give this some kind of name And then we can give it an amount and Then when we hit enter or click the Button it errors out and the reason That's happening is because we've Submitted here to the dashboard itself And this dashboard action is handling Any actions submitted by forms to this Page now what's happening is it's Looking in the form data it's looking For something with the name of username As one of the inputs the only problem is The form we're submitting doesn't have That username input so all this is just Set to undefined and so because of that It's saying hey undefined is not valid Json so when it comes down here and it Tries to get that from our loader Function right here it's saying hey I Can't find anything all it says is Undefined and now it's trying to Json.parseit and you can't json.parse an Undefined item so what do we do with That well first of all I got to come in Here and clear that out so that we can Actually see anything you can see that's Exactly what it's done it's saved it Now with each of these forms being Submitted we've got form data that's Connected to the form itself so what we Can do is actually figure out for each Individual form that's being submitted To Any Given route what properties exist

On that form so for instance I could Filter and say hey does it have username So I could do a little if statement here That says if it has username then do This however now I have to do that for Each individual thing but there's Actually a different way I found I enjoy Working with these forms that makes it a Little bit more uniform across the board So rather than having to remember each Individual thing that exists on a form And making sure I'd never name something The same way instead what I can do is Have a hidden input and that's what I Want to show you now so let me show you Instead of tell you let's go back to our Intro and we're going to actually add Something special here you can see here We've got our input with the name of Username that's what we were just Looking at a second ago but I actually Want to add one more input right here Now this is going to be the type of Hidden and this is a type that you can Give any input and this will hide it on The page however what we can do is name It something so I can name it what Whatever my action happens to be and the Convention I've stumbled upon is an Underscore action and actually the Creator of react router Dom I watched Some things heated this is what he did And it really clicks with me if every Form I submit has this name underscore

Action then I always know to look for it And figure out what I should do and then I can simply pass a value here of Whatever the action happens to be in This case it'll be new user now how do I Actually use that well if I come back Over to the dashboard right up here I Can not only grab the form data and here I'm going to spread these in and call Them values but I can also make sure I Extract from here the action so let me Go ahead and grab all this and just Comment it out so I can show you exactly What we're getting back here so I'm Going to grab this right here and we'll Console.log the action so I'm extracting The action and then just spreading in The rest of the values that don't Include the action now if I come over Here and I open up my console and I type In something like Chris and hit enter Now I see the action is called new user Now here you can see that this is uh Spazzing out on us that's all right We're going to handle that later here But now at least I know what action I'm Looking for now what I can do is just Create use cases for each of those so I Can say you new user submission this Will just be if underscore action if This equals new user then go ahead and Do all this stuff so I'll just grab this And drop it in right here now if I Resave this and I come in here and I say

Chris it should handle that just fine Now the problem here is that I actually Get form data here where this needs to Be values dot username so let's try that Again Since I changed the name of that and it Looks like I just changed it on the Toast message so one more time values Here as well come over here Chris and Now it should go ahead and submit that Form so since I changed the name of this And just spread in the values as an Object I need to actually change this From form data to values okay so now We've got it handled for this now what I Can do is just for each use case for Anything hitting this exact endpoint I Can actually tell it here's what I want You to do for this individual use case First of all though we need to add that Same hidden input on our add budget form So I'm going to scroll down here and I'll just do it just above the button That's where I typically do it input Like this and this will be a type of Hidden and then the name here will be Underscore action I do actually need to Use this underscore because the way Formers were written way back in the day If you do just plain action it will Actually read it as form dot action and So it will actually try to submit it to That so anyhow long story made short Just use the underscore there to make

Sure that you're not kind of creating Problems for yourself this will be value And we'll just go all this create budget So whenever I create the budget now I Want to be able to handle this so let's Save this come back over to the Dashboard and now we'll just add another Condition so if underscore action equals Create budget Then here's what I want to do Now what I ultimately want to do is save A new budget to my local storage but to Do that I want to actually write a Helper function that will do all this For me abstracted out in myhelpers.js File so we'll basically create a budget Here create budget and then we'll show a Success message so I'll return a toast If I click enter that should import that Up top dot success and we'll say budget Create it otherwise I want to catch my Error And I'll throw a new error that will Simply be something like there it was a Problem Creating your budget now for right now Just to make sure this is working let's Go ahead and throw an error We'll just say something like I don't Know You failed or whatever this is not going To get passed and anyhow because this Error is just going to be caught right Here all right so if I come over here

And now I say whatever and whatever and I hit enter and that'll say there was a Problem creating your budget but what That tells us is that it is actually Picking up on this action and it is Throwing this custom error rather than This one so it knows which form we're Submitting based on this action name That we passed in earlier now let's Actually create the budget we mean to Create so I'm going to come over to my Helpers.js file and let's see let's go Up here and we'll say create budget and Here let's go ahead and we're just going To write this as an arrow function Called create budget and it's going to Take in a few things and whenever I have Several things that are passed into a Budget I like to pass in an object just To make it a little bit cleaner so we'll Have both the name and an amount we'll Use those below so the very first thing I want to do inside of this function is Create a new kind of Base budget so this Will be the same for all of them we'll Say new item we'll give this an ID and I Just want this to be a random number or Random string so there's a couple ways We could do this you could do the old Math.random but there's actually a Crypto API baked into JavaScript so if I Do crypto.random uuid it'll actually Give me a random uuid automatically so Let's do that that'll be a little bit

Better and then the name will be Whatever name I passed in so I could Just do that as well but let's just keep It clean so like this just to make sure You understand what's going on here and Then we're going to do a created at and For this we'll just do date.now this Will give us our Epoch time so the the Number of milliseconds I think it is From like January 1st 19 1970 and then We're going to have our amount this will Be whatever amount we've passed in now By default it will be a string so we can Convert this in a bunch of different Ways like doing number but you can Actually just do like plus amount and That should work as well so it'll course It into a number now let's put a Placeholder here because I do actually Want a color here as well so I'm going To comment that out we'll come back and Do that in a second however the first Thing I want to do is see if I already Have budgets that exist so I can use a Function we've already created called Fetch data so I'm going to say const Existing Budgets equals fetch data and the key I Want to pass in is budgets so it's going To use this right up here and look for Anything that has budgets now there may Be nothing there like right now and so If that's the case I actually want to Pass back a return an empty array now

There's knowledge coalescing operator Will basically say if it's null or Undefined then instead of that give me This and that's what I want so either Give me the budgets if they exist or Give me an empty array and then finally I'm going to return local storage dot Set item and the item I want to set is Budgets and the value will be Json Dot Stringify and first I'm going to spread In my existing budgets if they happen to Be there it might just be an empty array But assuming that there's something There and the next I'll pass in my new Item I guess we could call this a new Budget as well but that should work so Now whenever I submit this form I want To actually pass in here a name and an Amount and then add this to my local Storage So let's go ahead and do that and then I'll come back and we'll add in this Color function so if I come back over Here now what I want to do is create Budget and if I start to type this there It is right there I can pull it in now This needs two things and you can see That the kind of type safety inside of Vs code is already telling me it's the Name and an amount where am I going to Get this name from well it should come From the form and I can get it from the Value of whatever this named field is so You might remember that I've got those

All set to values that's what we did Right up here so we said give me the Action extracted from the values and Then give me everything else as an Object called values so it's values dot New budget so that was the name property We gave this input right here below here Then we had an amount this was values Dot new budget amount Now just to make sure that this pulled Everything in where I want it to yep Right here we got create budget and Fetch data so those are the two helpers We're using in this file so let me pull Up this application over here we're Going to look at this storage and we Should get a budgets written out here so I could say like budget one or whatever For 123 dollars I hit enter and there we Go so you can see here what it first did Is check to see if we had any budgets we Didn't so it just added it in and we've Got a bunch of different things in here We've got the amount as a number like we Wanted to that's why we added that Little plus sign we've got our Epoch Time the amount it was the time it was Created at this needs to be created at So we'll change that in a second we've Got our uuid we've got our name so all Those things came in now let's go ahead And delete this because we're going to Change around a couple things first of All I want this to be created at and

Then I also want to add a color now We're going to get this from a function We're going to write up above called Generate random color And then let me go ahead and just create That at the very top of the documents We'll say like generate well it should Be clear enough all right it's called Generate random color so we'll say const Generate random color and here I want to Take advantage of the way that you can Do multiplication on an hsl color Function so the first thing I want to Figure out is how many budgets currently Exist and I'll show you why in a second So I say const existing budget length This will be equal to once again my Fetch data function that we wrote below And I just want to fetch anything with The key of budgets in this case there'll Be nothing there so the length will be Zero but if there is I want to see what That length is otherwise again using That nullish coalescing operator here I Just want to pass in zero so it'll Either be zero or whatever the length of The array happens to be then I want to Use that to return a string so this will Be a template string where I will take In my existing budget length and I will Multiply it times and I just kind of Figured out a value that worked for me This will be the H the Hue of the hsl Value then I want all of them to be 65

Percent on the saturation and 50 on the Lightness now if you're looking Carefully you'll notice that this is not Hsl it's not wrapped in hsl at least and That's because of the way I wrote my CSS In the next video I'll kind of talk Through a little bit of that even though I'm trying to avoid CSS where I can here All right so now this should be appended As one of the different properties on This new item so let's do this one more Time and we'll just go ahead and hit Create and you see here this is what We've got so there's our color and if I Were to do another one now notice this Is not clearing yet we'll have to take Care of that later another one here Should be 34 yeah and then the next one Would be up from that etc etc so here we Are created at the ID the budget name The budget amount all that is set up Here for us now there's a couple ux Things we need to pay attention to You'll notice first of all that this is Not clearing second of all assuming that You're submitting to a database or Something like that usually you take Create and it would take a little bit of Time for you to get something back so You might want to disable this button in The meantime you also might want to show Some kind of UI that shows hey we are Submitting this and then show a message Depending on what happens well all that

Is what we're going to do in the next Video kind of some of these ux Improvements and then we'll get around To displaying the budgets below

You May Also Like

Leave a Reply

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