Create a Popup Modal with React Bootstrap - React Tutorial 9

hey everybody welcome back to your react series in this episode we're going to talk about creating a modal this is a pop-up window that goes on top of your web page that you can then interact with or close this is how we're going to edit data that popup's going to come up we can edit as much as we want and then it won't change the original data until we hit complete or update or whatever the button might say so let's go through an example of what this might look like here's our application whenever we want to edit some data we can just go in here change it and hit update and it'll replace the data on the homepage now if we wanted we could build this from scratch but as you guys know i like to just use what we can out there already that'll make this easier for us so there is what's known as react bootstrap and this will introduce a bunch of components that we can use in our project that curry media how may i help you as i was saying before i was so rudely interrupted react bootstrap gives us components we can use and it makes it very simple so one of these is the modal and we can get a really good example of how to build that functionality into our project and it's not too bad now because we're going to have an edit button for each of the different employees we're actually going to do it within the employee component you could do it inside of there or you could create another component just to manage the modal part of things which i think is what we're going to end up doing now before we jump in the next couple of steps get pretty complex so we're splitting this up into a few different concepts first we will learn how to create the modal with react bootstrap how to open it and how to close it pretty simple once you get the hang of it but it's a little complex if you're new so we'll try to explain it the best of our ability number two styling and submitting with a button number three passing props from an employee to the new modal component that will basically autofill the user data into that modal and then lastly hitting that update button and having that data change on the home page of our application so with that intro let's get started with getting the modal set up so that opens and we can close it the first thing i wanted to mention is that from the previous videos i renamed these from class to class name which is the proper way to define classes and react so if you've been following along from the beginning make sure you update that to class name that was just a copy pasta error and i'll be careful not to do that in the future that being said it seems that the classes were still being applied even though we just used class instead of class name so let's head over to react bootstrap and there is an install guide under getting started so one thing i want to remind you is that nothing is going to look good unless you import the css so this is a two-step process not just a single step so if you do this and it looks awful that's probably why so we're going to do the npm install and we'll go down in the terminal paste that there and that will download what we need and add it to our package.json now let's go ahead and grab that css copy that and that's going to go in your outermost javascript file so let's go over into index.js and we can import that here now these styles should be available to all of our components on our website so for creating the modal we're going to create this inside of a new component so source components right click new file and for the name here i'm just going to do edit employee and the naming convention here is pascal case which is capital letters for each word you'll often see lowercase with hyphens between the words as well i won't worry too much about it just be consistent now heading back to the documentation we can search modal and there are a bunch of examples so we will want here's one so let's go through these this one will allow you to click off and that works for many examples i tend to prefer the ones that do not close when you click outside of them because i hate when i'm working on something and then i accidentally click or something and it gets rid of my work so this is the one i'm going to use but feel free to use whatever you want from this list but if you want to follow exactly this is what you're going to want so i'm going to copy this code here not going to take the render so just this and then we're just going to go into edit employee paste it and change a few things specifically the name of the function so we'll say edit employee and then this is going to be exported so we'll say export default edit employee which will allow us to bring it into other files now let's see what this thing actually returns if you take a look it returns a button and the modal itself all within a fragment so we don't actually have to create a button ourself although we do already have a button inside of our employee so we're going to talk about what we're going to do with that but for now let's just push our button down and we'll create the new button just by creating an edit employee component and it'll be self closing so we'll save that and now let's try this out you can see it looks a little bit funny but we're going to make it look a lot better don't worry so we have two buttons now our update button which doesn't do anything and then the bootstrap button so bootstrap also has a collection of buttons you can use and there you go you have a modal it's that simple understood doesn't do anything and close will close it so since we have two options for buttons which one do you want to use well i guess it's up to you but i kind of like the button we already have so what i'm going to do is i'm going to take our button cut it go over to edit employee and replace the button they have there so paste that here and then just change one thing about the button which is the on click handler so handle show and that is the function that will allow the modal to pop up now we should be able to remove this button now you might notice one has a lower case one has an upper uppercase so that's because this capital b button is a custom bootstrap component we're just going to use the standard html button so let's go back to our site and now it looks normal but our update brings up a modal that's all i got in this video in the next video we're going to create a form inside of that modal so if you just want to crank through these videos i recommend going through the playlist link which i'll leave down in the pinned comment that'll make it much easier to follow this series thank you for watching and i'll see you in the next episode [Music] you

Channel: Caleb Curry

Views: 36,194

Keywords: react, react tutorial, react tutorial 1, react caleb, javascript react, react course, free react course, learn react, learn react today, useState, tailwind css, tailwindcss, styling with tailwind, array map, array.map, loop through state array, map through state, loop state

Id: aeQa9U0fLCI

Length: 6min 56sec (416 seconds)

Published: Wed Aug 24 2022