Modal in ReactJS - Code a React Modal Tutorial using Hooks

[Music] hey guys how's it going i'm back here with another video and today i decided to bring this video where i'm gonna be showing you guys how to build a very simple but very cool looking modal and react.js so this is exactly what we're going to be building over here you can see now this is just an example but it will imagine in your website there's something saying something like hey click on this button to open a model and when you click on this button you'll see a modal will appear like over here um you can add it and make it say whatever you want you can make it you can customize it to however you want it but this is kind of what we're dealing with it will appear based on what you click and then you can click on this to i don't know take some action or you can just click on cancel to go back or you can also go back by clicking on this x button over here i wouldn't say this is very complicated however the logic to build this is really interesting for beginners and i definitely think it is a stepping stone for those who are learning react because it definitely teaches you guys some of the basics that are fundamentally important later on in your react coding journey and before we get into the video if you guys could leave a like and subscribe if you're not subscribed i would massively appreciate it because every time you leave a like it definitely helps push my videos to more people i realized that since i started asking you guys to leave a like my videos started being pushed to more people and i couldn't be more grateful so if you guys could help support the channel it would make me very happy so now let's get into the tutorial okay guys so as you can see um i already set up a very simple application over here this is a react app i just ran yarn create react app and i deleted the necessary files these are the only files we're going to be using and i already just created a very simple web page with this title and this button um you can see that when i click on the button nothing happens because we haven't implemented the logic for it yet which is the main point of this video but if you want to follow along and have the exact same application um this is the css that i'm using over here um all the link the link for the code and for the repository will be all in the description so if you just want to uh pull and this application so that you work on it um it's totally fine it will be in the description so you can see we have a very simple application over here in our app.js file we have this component called app which inside of it it just has an an h1 tag and a button and we give a class name called open model button so intentionally when we click on this button we want to open the model so in order to make that work what we want to do is we want to create a component called the moto right by the way i may say model instead of modal throughout the video it's just that throughout my whole life i always called it model but i know it's modal so i'll keep trying to to fix it on my own so what we want to do is we want to create a folder over here called component uh components and this is where we're gonna hold all of our different components in our application in this case we're just gonna have one component which is going to be called moto so we're going to say modal.js like this and over here i'm going to use a snippet that i have which i mentioned in a lot of videos which allows me to just write rfce and it will generate for me this beautiful functional component so the thing with the moto is we want to be able to see it so right now what we're going to do is i'm just going to write something i'm just going to write like modal so that we have a confirmation that this modal is being rendered then we want to come here to our app.js and i just want to render it so let's just say moto like this and let's import it over here at the top so i'm going to say import modo from dot slash um then we're gonna go to components and then slash moto and now we should see there's a modal component being rendered over here right so what we wanna do is basically we wanna uh generate the the a very simple ui a skeleton to our model initially no no styling whatsoever and then when we're ready we're going to basically just uh add the logic so that the model will appear based on butter clicks right so for the model we're going to come over here to moto.js and we're going to start by uh creating our skeleton right and when i say skeleton is just the structure for our jsx so like the divs um the buttons we're gonna put the the the text whatever we want so what we're gonna do is we're gonna create this overall div over here and let's call it uh let's give it a class name of modal background and what this div will do is basically when we click on our model we want to be able to create a background around it right we want if you remember in the example when we click on it the background becomes gray instead of what it usually shows right so that's basically what we're doing we're creating a fake background to represent um kind of to give this kind of like blurry effect so this is what this div will be representing then we want to put inside of it uh a div which is going to actually contain all of the info like everything related to the moto so let's just give it a class name called moto container something like this then we want to come over here and what i like to do is i want i like to basically divide my my applications every single div that i work with um throughout its it's different components so in this case our moto will have three different sectors one is gonna be called the title sector so i'm going to create a div over here called um maybe title i'm going to give it a class name of title so class name and then i'm going to call it a title like this um then we're going to copy this and we're going to add two more because it's going to be divided into three different parts and one of them is going to be called the body the other one we call the footer so basically if you recall we have three different parts to our model we're going to have the title part where there's just a title asking something like are you sure you want to continue um then there's going to be the body you can add different stuff to the body you can put a picture you can put i don't know more text you can put a paragraph i just put a very simple little text in the middle um and then there's the footer which includes the buttons maybe a button to continue forward or a button to just cancel everything so that's kind of like the division that we're following so one thing that i also want to do is before all of this if you recall we have a little x button a little x that when you click on it it will just close the model so the way i like to do this is i like to come over here and before the actual uh before the actual title we're just going to create a button over here and like above the title because the title will be below it and this button will be will just have a simple axe as like it's text inside of it so now that we have kind of divided uh a little bit of the skeleton let's start implementing the stuff inside of it so what i want to do is we know that the title it's going to have an h1 tag inside of it um saying something like are you sure you want to continue something like this because usually um modals are used for like confirmation right or maybe it's used for other stuff as well but in this case we're this is the kind of the the format that we're following and then for the body we're gonna have a p tag because it's kind of like a paragraph um which will say something like um the next page is awesome by the way i don't remember if this is exactly what i wrote in the example in the beginning it's because i'm not looking at the code um i'm just writing as i remember so the next page is awesome you should move forward something like that you will enjoy it something like that right so and now for the footer we just want to add a very simple very simple but like two different buttons one of them is going to be called it's going to basically just say something like cancel and the other one will say something like continue continue and you'll see that if i save this and i come over here we have our skeleton right and and our skeleton um just shows the ui the the html elements that we added um but it doesn't have any styling obviously um and it's completely okay we're gonna work with the styling later on but for now we can see our model is appearing now we're going to work on the logic right the actual uh really important part of working with motors how do we make it so that when we click on this button this will be covering the whole page or this is going to appear and when we click on the axe or in the cancel button it's going to disappear okay so in order to make that work we're actually going to come here to our app.js and inside of here we're going to create a state that is going to represent whether or not we open the model or not so over here at the top we're going to import from react so import like this import from react the use state hook um like this and basically uh this will allow us for those who don't who are not familiar with the use state hook it will allow us to conditionally render certain uh components certain aspects of our page based on some sort of variable and it will re-render the page every time that variable changes its values so in this case we can just come over here and create our state like this we're going to say const equal to use state then this state will be a boolean so it will initially be false because the we don't want the modal to be opened initially and then we can call this moto um something like i don't know open modal uh and then we're gonna pass a function that is going to be used to mutate this variable so we usually call it set open modal or something like that and now that we have this state we want to be able to change its value based on if we clicked on this button so the way to do this is we're going to come over here and we want to set this value to true if we click on this button so we're going to say on click and then we're going to pass a function inside of here and this function will be all in line like this and all it does is it will basically set open model equal to true if we click on this on this button all we're doing is we're calling this function and changing the value of openmoto to true so that we actually render this and now you'll see that this logic will work because for example if we want to conditionally render the model based on the value of this state all we have to do is we have to open some javascript inside of our page and then just ask okay if openmoto is equal to true then we want to render the modal component this logic over here is very common in react and it will just allow us to show the model based on the value of the state so now if we save this you'll see that initially it won't show the model because moto is initial like open mode is initially false but if we click on this button now it will show it um we don't have any button sending it to false right now um but that's exactly what we're going to do after this but you can see that it's actually opening every time we click on on the open button and if we refresh the page it will disappear and if we click again it will show again so now we want to be able to set the sequel to false based on if we clicked on the the links like this one's over here right so to do that we actually have to access this state over here inside of the modal.js component because you can see that the buttons that we want to click are all inside of here so how exactly do we do this how do we access this set open model function inside of a different component well we can just pass it through its props so over here we can create a prop um let's call this uh i don't know change uh actually no let me call it close moto like this and this is this is the name of the function we're gonna be using we can call it whatever we want it's just the name of the prop and then over here at the top we can see that this function called close modal it will be passed um based on the set openmoto function that we already have so basically we could have called it as well um set openmoto but i don't like this name so this is why i'm just i just i called it closed moto but basically now what happens is every time we access this closed moto prop um it will be the same thing as accessing this set openmoto function so all we have to do now is inside of this moto component every time we want to close it so for example in the x button over here we want to do the same logic that we did over in the app.js component we just want to create a function on click that will um close moto like this close modo and it will set it equal to false now instead of true because we're trying to close it and we'll do the same thing for the cancel button so i'll just copy this over here and go to the cancel button and you'll see that now if i refresh the page and i open this and i click on the ax button it will close it if i click again it will open if i click on the cancel button it will close it you can mutate uh different states by passing them through props which is really interesting in react because it allows you to do stuff like this now you can see that our logic is basically working right we want to be able to make this look a little bit better and i already have the css pre-made that for for that specific model over that i've showed you guys um so what i want to do and what i've been doing in my previous videos because you guys requested me to do this um is i will just paste the css um for all of the different divs and classes that we created and i will just go over what i did for each one of them so that the video isn't like 40 minutes long because css usually takes a long time to write so i'll be back in a second with the css already pasted in and i'll see you guys in a bit okay guys so as you can see um i just added the css and it looks exactly like how we i showed you guys in the beginning you're able to click on the buttons um and it will just close it and it looks pretty good in my opinion i really liked what i did here um and i'll just go over the css in a bit also i wanted to tell you guys that um i created this modal.css file instead of the components folder and this is where we actually put all of our css and to actually access the css file i just imported the moto.css file here at the top and also one other change that i made was i realized that i had to create a div on top of the close button the ax button so i just created this div over here called title close button and i just wrapped it around the button so i didn't do this while i was going over so if you didn't do that as well and you want to do it this is how i did it so these are the small changes that i did and also one thing is you can see that when we open this our cancel button isn't red we can very easily fix that by just passing you can see here in my css i created a an id called cancel button which makes the button red so what i can do is i can just come here to the cancel button give it an id of uh cancel did i call it cancel button yeah i call the cancel button i'll just give it an idea of cancel button like this and now it should be red instead of blue so this is all the css that we did let's go over exactly what i did so basically over here at the top we created a moto background div which is basically this div over here it just makes everything gray and it overlays over whatever is in the background and it is completely fixed and it's 100 of the width and 100 of the of the height i made it gray so this is the color um and when it's when i say it's fixed i mean that um it is fixed at the top right it covers the whole thing and i gave everything a display of flex and i put it right at the center so the only thing inside of this component inside of this div is the motor container which we justified to the center and aligned it to the center so that it is exactly at the center like this then for the moto container we did some very simple styling we just made it 500 to 500 we gave it some border radius we gave it some box shadows that i thought looked really nice and we gave it some padding as well you can see that all of this is pretty nicely seen over here even the box shadow so then inside of it we basically uh first of all grab the title and just give it some aligning to the center we've also margined it to the top um a little bit 10 pixels so that it looks a little bit like it pushes a little bit to the bottom um then for the close button we just uh for the div around the the close button we just justified everything to the end so that the button is right at the end over here and then for the button itself we just made the background color transparent and removed all of the border and also it added some cursor so that when we hover over this it changes the cursor as you can see and then for the actual body we just added we made a display of flex and justifies and align stuff to the center we increase the font size a little bit and you can see that everything looks pretty nice we we align the text to the center so that it gives this kind of cool effect and then finally for the footer we just um justify stuff to the center again we added some margin to each of the buttons we made the the continue button blue and for the cancel button we made it crimson which are already predetermined colors in css so this were all this was all the styling that we've done and i really like how it turned out so if you enjoyed this video please leave a like down below and comment what you want to see next subscribe because i post two to three times a week and i would massively appreciate if you guys could help push my videos to more people help grow the channel we're going at a very good rate and i am very thankful for that so i would really appreciate it if you guys could help support the channel and yeah that's basically it the code for this is in the description so just check it out and yeah i see you guys next time

Channel: PedroTech

Views: 23,880

Keywords: computer science, crud, css, databases, javascript, learn reactjs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, react modal, modal in react, modal tutorial, modal tutorial javascript, react modal component, react modal tutorial, react modal popup on button click, modal tutorial react

Id: ZCvemsUfwPQ

Length: 18min 26sec (1106 seconds)

Published: Thu Jun 17 2021