Display Popup in react JS

hello how's it going everyone in today's video i'm going to be looking at how to display a pop-up pop-up uh like a model whereby when you click on a button a like a div is displayed in the center of the screen having said that let's get right in first of all we have to create a new we have to create a new package called uh let me call this a pop-up and then inside of this pop-up i'm going to create a new folder a new class called pop sorry pop.js another spot now the next thing i'm going to i'm going to create a functional component rfc like in the previous of my videos i used to say how i was able to generate that spoiler platform because of the a library or rather a extension i installed so now the first thing i'm going to do is i'm going to say const to declare to pop up comma sets pop up then sir i'm going to say use states like so and then i'm going to say is states like that now i'm going to create a function called uh open and then i'm going to say arrow function is equal to now say switch to switch in between now i say pop pop-up and i'll say case close close set pop-up to be what's open set pop-up to be open and i'll say case open if it is open set the purple to be close set purple to pixel single quotes close otherwise the defaults would be set popup to close as can see that defaults here also then i would i also have to return so the execution stops there now here it's on and then also return so not remove it so and then i close out our switch case and then the methods body itself so now the next thing i'm going to do is i'm going to come in here i'm going to say uh button this is the button that will trigger the click so i'm going to call it alright i'm going to give it a value of open and i'll say on click on click click say ick is equal to our arrow function not capture letter is smaller event is going to open sorry open like so and i'm going to come down here i'm going to create another function rather in here and not down here i'm going to call this function pop up yes so in this pop-up i'm going to simply arrow fce okay for functional components i'm going to click it to be our operation then i'm going to come back here now let me save this i'm going to come back i'm going to say pop up i believe it was imported and it wasn't so now let me put that import i don't know why my popup is not working my autocomplete is not working but let's continue i'm going to pass in a probe it's called some pope is important to sorry i say purple like so now i'm going to close it out now this function now or rather these components will now be the trigger or rather really deep that will display as they pop up so now let me come here and then let me come and give our pop-up so first and first i'm going to pass on our props then i'm going to console.log it's just to be sure that it's changing in the right format some props so you guys will be called here some pop not some props then i'm going to cut here i'm going to say this is an mtgsx container now see if props yes props dots some pop is able to open if so then we do this create a start con component container and record it i'm going to import sorry not say import it's not container sorry i don't have no hard coffee this month so i'm looking at my bits first so i'm going to start imposter from start component like so now i'm going to come down here and say otherwise don't display anything and that's it and bring this down i'm going to head over to the bottom i'm going to say first container is able to start the d i think that's it now see now let's style our hdid our pop-up height will be over 400 pixel then the weight will be of a ridiculous 30 percent 50 of the screen view height then left will be 50 percent then top also be 50 then border radius to make it look okay it's going to be 10 pixels when i say box just to have some effect of uh of a like indeed that shows that's a pop-up box shadow this is the arrow gpa because 800 0.2 zero pixel then i'm going to show you guys where it gets this uh bulk shadow well i don't have to type it that i just copy it and paste it so let me just follow our remembers finish it up i'll say 209 pixel 0.0 pixel like so now save web dash web dash webkit iso then i say dash transform trans trans lead minus 50 now i'm doing this is to center it in the center of the screen 50 so like so so what i did is i say webkits does transform colon translates minus 50 plus minus 50 just to give you that smart in the middle then i'll say transform pull on i'll copy the same line and i'll paste it in here like so let's see transform i'll space this out why this is not turning green or grey rather no but i'll come back to this then i'll say background g r o u n d now i'll give you the position of absolute and i'll give you display sorry display flex now i'll say align items i would i'll not align items first let us run it and see what we have then outline items you know what i think i'll just get rid of this because it doesn't really have an effect so i'm going to leave it first let me save and i'll come back here and then i will say save now well i should head over here i'll say import pop song sorry about that imports pop-pop or other pop from pop-up slash pop like so then i'll head over here and i'll i still have a lot of space part of me guys that my code might be looking a bit unkept but i actually use this for my youtube videos so all these you have seen here are previous videos i've made with it so i don't want to always create a fresh project all over again it's just the same so i'm going to say pop like so and i'll save it now actually head over to our browser right here when i say localhost 3000. you see that we have open okay i think i have a typos another type about uh let me head over to pop-up let's see uh okay here that it's uh to get rid of that or save it and then let's click on open so we have a leave but that game is normal center and this is a at this point so now let's fix that so now i'm going to head to this part as the pop-up itself i'm going to see the webkits the transform translates then transform translate now i'm going to align items alright dash items let's say center and i say justify justify hash content and also don't say center if i should save this now i should get something to work with let me quickly go through my left is 50 30 now let's look at this on my refresh i should click still is not in the center okay just give me a minute guys and i'll get to the bottom of it so guys actually i figured out what was issue i wasn't typing the transform properties which would be transformer not transform so that was it so now if i should save this now let's head over to our browser it's going to actually refresh when i click on the open you see our div is centered in the middle of the screen so now what i'm going to do is i'm going to say header 1 all right ahead of 5. that one is too big i'm going to see set content content is sent with center nice centered and then i should head over here and then i refresh click on open it's gonna snap the dv center in the middle so this is how you create a center div in window react.js thank you guys for watching please don't forget to like share and subscribe for more videos uh i produce videos on a weekly basis so i'll try my best to keep uploading more content so thank you and i god bless [Music]

Channel: Network Programming

Views: 5,420

Keywords:

Id: bMaabEnUyw4

Length: 13min 29sec (809 seconds)

Published: Mon Apr 04 2022