Build A Custom React JS Modal - Using Hooks (Pop-up Window)

Build A Modal in React! In this video I will share with you how to build a custom modal (pop-up) in React JS. We will be using the useState hook to toggle our modal and custom css for the styling. The stopPropagation function is implemented to be able to close the modal by clicking outside of the modal! Hope you guys like it and thank you for watching - feedback welcomed!

ZeroTo Mastery:

Coding Challenges!

👨‍💻 Github 👨‍💻

🔥 My Coding Equipment 🔥

☕ Buy me a Coffee ☕

Instagram 💪

[davidfedchuk]

Helped me get past a bug i've been stuck on for a minute. Thank you!

[cryptonicchronic]

watched a lot of tutorials, your fast but clear and explain it easy enough to understand. thanks video rocks

[eliud_karuga]

clear concise and put in an easy way. this is the best one

[onthegocode]

Great video! I'm using this to build out my portfolio website and this is a big help!

[ABC-elql]

HI. I'm a S.Korean fan of yours.
Your video is very useful to me.
Especially, the tip for part 'stopPropagation()' was very good.
Thank you so much!

[Gajanan]

Really Great video champ. Thank you! 🏆

[allanfernz]

Thank you! This was exactly what I was looking for! Simple and concise! New Sub!

[vudlvnl]

Thank you so much for this helpful video!

[jritzeku]

Im guessing the stopPropagation() was needed because our modal content was nested inside the overly content??
I've seen prior modal examples where overlay and modal sit adjacently and hence never use stopPropagaion.

However, I do like the nested order of things, seems seems more semantically correct and intuitive.

[fernandogomez]

Capo!!!! bien explicado, simple y SIN librerias!!!!

[dagi_works]

Your videos have taught me a lot man, thank you!

[feastofsteven]

Great video as always, thanks man! I'm having some trouble getting the overlay to work because I am using this to display a menu that is nested in my navbar. So, the open icon is in Navbar.jsx, it opens the modal via Menu.jsx, and hence the 'overlay' only takes on the size of the menu and not the full background. Seems like this method only works if you build it directly in app.js, is that correct?

[ulisesmak]

this kind of video are so helpful, tranks man!

[kennedyfreitas]

thanks a bunch, will be applyng this one with context and some data coming from sanity

[fullkanks]

thank you so much you really saved my time

[rbmax]

Thank you man it is awesome. I appreciate it

[viniciusm.m.]

Exactly what i need! Thanks man! Abraço!

[jeryngungan]

In my react code there is notification too many rerenders i cant fix it

[faisalahmad]

It’s a really really helpful video❤️❤️

[BlazingTyphlosion]

Confirmation should always be on the right and cancellation on the left...