??? 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 to Lesson Four this will be a Short little video on how to add a Little toast notifications this will Just give the user some kind of Indication visually that their action Succeeded in some way what I want to do Is when we come over here and click Delete user I want to pop up a little Thing that says like hey you've been Successfully deleted or whatever you've Deleted your account something like that To do that we're going to use a little Library called react toastify I love Little projects that take a specific use Case that you might have and just solve It for you and that's what this react Toastify does so I'm going to go ahead And open up my local Dev environment Copy and paste this npm install script And then get my server back up and Running All right so all we have to do if we Kind of don't pay too much close Attention to all the details is Basically have a toast container Somewhere in our app one time and then Import the CSS somewhere one time and Then I'm going to have a toast whenever I want to actually use a message in this Case this toast says wow it's so easy or Whatever all right so what we're going To do is import both of these and I'm Going to just add them to my app.jsx File so let's come up top here and we'll
Say like I don't know I guess Library Imports something like that I don't Actually need toast here but I'm going To use this toast container and I'm Going to drop it just below my route Provider and it is an actual element Like that so now I've got it on all of My routes by default since it's in my App itself now what I can do is on my Logout I can actually hit a toast and Show that however I want to show it so If I come back over here what I'm going To do is after I've deleted the user now Normally if you'd be submitting to a Database or something like that you'd Want to wait till you get a response Back check if it was okay if it was then You'd basically show this notification So I'm going to Simply type toast like This and you should see toast reactify Up here importing this so let's add this As like a library or something like that And there's a couple different things You can do if you are waiting back on a Promise you can use promise like this And then you can basically pass it three Different options one of those would be Pending and then error in the success so While it's pending it'll basically be Spinning if you can error it'll show an Error message success you can give it a Success message in our case we're simply Going to do success because it shouldn't Fail going to their local storage and
We'll simply say something like you've Deleted Deleted your account All right and then it will return down This way so if we come back over here And if we did this correctly I should be Able to click here click OK and it says You've deleted your account now the cool Thing is if I take Focus off it'll Actually stop it by default I can swipe It off if I want to as well or I can Click X or it'll just manually remove Itself after so long we're going to be Using this toast functionality all Throughout the application just to show Them when they've added a budget removed A budget deleted their account when They've created a new account all that Kind of stuff now like I said this was a Very very short video and the next video What I want to do is show you how we can Actually have a log in form that shows So that they can actually create an Account so we'll do that by creating a Splash screen
