Build a POPUP component in React JS ~ A Beginner Tutorial with React Hooks!

Learn how to build a popup component for React JS by using React Hooks and functional components. We build a timed popup that opens after an option amount of time and we create a button triggered popup as well using the same component.
// JOIN MY DISCORD
/ discord
// Support me on Ko-Fi
ko-fi.com/tyle...
// FOLLOW ME ON TWITTER
/ tyler_potts_
// BECOME A MEMBER
www.youtube.co...
// MY GEAR FOR CODING AND TH-cam
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
All of these products I own and have tested!
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.co...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

[@alirasheedmd]

Bloody Hell mannnnn that's the best tutorial I have ever seen I was tired of using the react-modal thanks for the tutorial.

[@RajPhotoEditingMuchMore]

Really amazing, along with popups, learnt many new things also. Thanks 😊😊🙏

[@TylerPotts]

Glad to hear that 🙌

[@ying7124]

Bro you are my secret teacher now. You deserve the subscribe sir.

[@GomboStudio-s4z]

This video is like wine 4 real!

[@emmamachi7822]

Tyler, you are amazing! I'm going to binge your videos to learn more about web-design! I love you!

[@TylerPotts]

Haha! I'm happy you like them! I hope you find them useful, Emma! :D

[@jacksonsanti]

Hey Bro, I'm beginer with React Js and u help me a lot with your video. U are the best !!! 👏🏻👏🏻👏🏻

[@TylerPotts]

Happy to hear that!

[@PandeyjiVlog582]

i learned something today thanks to you dude i love it

[@КрокодилГена-н7й]

thx too much for this video. I didn’t know that you can pass a set function in props to another component, this is very cool!

[@ritualj0int]

Woaw Tyler, that amazing work! Well done, helped me a shiton!

[@TylerPotts]

Glad to hear it!

[@mosesegboh]

Lovely video, very clear and well explained.

[@TylerPotts]

I'm glad you enjoyed it!

[@BernRezz]

what a wonderfull video man, and youre so didactic, i learned a lot from this video, thanks and keep the awesome work!

[@cody_code]

great work on this! got a new subscriber

[@TylerPotts]

Awesome, thank you!

[@TheTwoFiver]

god bless youtube and videos like this one

[@dailyWalker1]

Thanks dude for your understandable and easy tutorial

[@TylerPotts]

Happy to help

[@shaziasulthana9454]

really amazing superb Explanation.
🤩

[@piyushlohiya1977]

I was searching for this and you made this so simple😍

[@TylerPotts]

Glad I could help!

[@ashandimantha6538]

Thank you so much !!

[@TylerPotts]

You're welcome!

[@abdulraheemelsadig9297]

refresh refresh refresh 😂. you have got a new subscriber thanks for the tutorial

[@TylerPotts]

Awesome, thank you!

[@santiso878]

it helped me a lot! thanks

[@TylerPotts]

Glad it helped!

[@rangabharath4253]

Awesome as always 👍😀

[@TylerPotts]

Thanks again! haha xD

[@shubhikaagrawal7888]

Worked for me. Thank you for the help.

[@futureverse9347]

Very helpful and easy to follow!

[@tunayuzbayyelce3455]

Thanks for this video. It helped me a lot.

[@gabrielmoraes4516]

Awesome video! Super well explained! thank you!

[@dweebycat9929]

Thank you so much for this!!

[@sanjarabakirov7116]

Of course, it works. Thanks a lot.

[@ghaziabbas3087]

Yaayyy! More react! ❤️❤️

[@clareivers]

Thanks so much, this is awesome!

[@TylerPotts]

Glad you like it!

[@victorga74]

Excellent,
Thanks for share it

[@Amyfers]

Thanks for the tutorial! ☺
Anyone out there trying this out in a .tsx file and getting a compile error "return type 'Element | ""' is not a valid JSX element", just make it a .js file instead

[@umarkhan_khan]

clean and simple lovet it

[@eduardoranierosilva]

I not even watched the whole video and got the answer i was looking for. Sometimes we just need to step out from the code for just a second. Either way i gave it a like for the video. Thanks man

[@TylerPotts]

Thank you!! Glad you found what you was looking for :D

[@filipesilva1584]

amazing. helped me a lot!

[@ol1175]

Just AWESOME!!!

[@TylerPotts]

Thanks

[@asilbekegamberdiyev1558]

very useful informations thanks

[@TylerPotts]

Glad it was helpful!

[@zechico2494]

Thanks for great content!

[@nickhillmann2773]

Perfect video 5/5

[@TylerPotts]

Thank you

[@yacineguena9238]

Thank you very much your video was really helpful

[@JustAbdulbaasit2008]

THANKS A LOT

[@TylerPotts]

You're welcome!

[@beaker8111]

This is easy. I'd like a tutorial on how to make a reusable component with dynamically changing data in the popup.

[@weslolo1074]

Thank you!

[@MrAndykofi]

Nice one, thank you.

[@InverserPro]

Thank U, bro!

[@moshoodsanusi6246]

i am currently following this tutorial now, but my setTrigger function is not working. I don't know where the problem is coming from. kindly help

[@Crychimou]

How can we do if we just want to just dismiss the popup by clicking outside of it and not on the "close" button please ? Great content by the way !

[@alexstaresson9517]

cool stuff

[@HackerFlavio]

amazing video

[@TylerPotts]

Glad you think so!

[@Umavenugopal]

you rock! Please make a video on animations too

[@TylerPotts]

Thanks for the idea!

[@masruralam6199]

thanks for nice explanation, which theme are you using

[@pedrodiasesquerdo48]

Excelent, thank you.

[@backtic_education]

1000000000 thanks

[@Ninjajitsu562]

hod do i position it within a certain conytainer

[@yamillayicov7345]

What's theme WSCode?

[@PrashantPandey-x8v]

which theme is it ?

[@gowthamibathula6247]

Can you make a video on tour guide tooltip.. Please

[@philong844]

can you explain for me where is the ''trigger'', thanks you for answer me!

[@winata7]

thanks

[@theodorbursumac889]

super :)

[@TylerPotts]

Super!

[@qarinet6059]

Awesome 👌 nice work continue 👏
What's the name of VS Code theme?

[@elyeszarrad1504]

good video

[@carlafaes9282]

Estaria bueno que hicieras uno en el que se pudiera agregar el setTimeout y el boton en el mismo popup y no en dos diferentes.

[@bold_breakdowns]

i want a popup with multiple buttons and different content but don't like the look of what i have here, can you help?

[@mr.RAND5584]

ang husay po (tagalog).

[@PerfectCodeAcademy]

what theme are you using in your vscode bro?

[@Tahnddaay]

your english communicate is very easy to hear, especially not good english likes me, i wonder do u have any course about front end by your teach ?, i'm from Viet Nam

[@purpleplantain374]

I followed the tutorial, but the close button is not working. It may be important to mention that “props” is never italicized for me.
Edit: nevermind, I forgot the setTrigger part in App.js

[@I3uzzzzzz]

thank you. how would you pass a variable into the popup window? i want to display the full image like In Instagram when you click it.

[@TylerPotts]

I would use a custom state/prop to pass it through with the data you need

[@nikhilyadav527]

my close button doesnt work
please help

[@3VishalSingh]

this is library for popup...cause this ain't working for while name is changed.... I am using two popup in same page but the 2nd popup using in new file isn't working fine(not able to import in working file) please reply??

[@anishachoudhury_]

Hi, so I have a progress bar and when i click on it it should give me a pop up. Can anyone help?

[@WillKristiansen]

I keep getting an error saying props.setTrigger is not a function. Can you help?

[@masonminnicks6338]

I'm getting the same thing, were you ever able to figure this out?

[@masonminnicks6338]

nvm lol I got it, it was because I forgot to add setTrigger={setButtonPopup} to the Tag

[@DariuszMakowski]

wheres git with source?

[@leodragonheart754]

How do you make it responsive?

[@mosesegboh]

just style the popup and popup inner component using css

[@NBA6Fan]

4:00 Hahaha if this is not global first approach to fixing any error in frontend... :D

[@kritikasharma2127]

Nycc

[@davidholden6293]

where is the code bro?

[@KoreanBronzeIV]

Tyler do you know these bots in the comments?

[@andresaguilar4409]

ok

[@ricobuttonpusher7061]

It doesnt work anymore.

[@gunnardeangelo7384]

So Nice 💘💘💘💘💘💘

[@laniakea1541]

Someone who makes a react tutorial but cannot put the link to the code in the description does not deserve a like

[@alidante5648]

Need lovely 😍💋 💝💖❤️

[@jacsdev]

Great

[@utkumattaktas7994]

Thank you!

[@TylerPotts]

You're welcome!

[@RafaelLima-jg3pm]

Amazing, helped me a lot.

[@upanisad]

Thanks!