Modal in ReactJS - Code a React Modal Tutorial using Hooks

Build a Modal in ReactJS Tutorial. In this video I will show you guys how to build a simple modal in react!
Code: github.com/machadop1407/React...
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Email: [e-mail]
Equipments I Use:
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🌟 Algorithm Book To Pass Coding Interviews: amzn.to/2Z2CirS
🌟 Microphone: amzn.to/2MKAm4V
🌟 Keyboard: amzn.to/3tvU6ZR
🌟 HD Webcam: amzn.to/3tMpJPD
🌟 Room LED Lights: amzn.to/3a5mFGp
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

[@KJMacoustic]

stumped on how to make a modal in react for days because of state and hooks but you made it so easy to understand in this video! Thanks!

[@jjrise]

well this was a welcome surprise... I can't tell you why, but this was probably the 15th video I've watched on Hooks and it clicked for me. Your teaching style is fantastic. Keep it up!

[@jaia466]

The best channel for me to learn React! The contents are more likely a real world implementation when creating a project especially for a beginner like me. Thanks Pedro! :)

[@amanpreetsingh7449]

Thank you so much for this tutorial. I was stuck for some time on how to approach this issue of modal in my project. Short and concised explanation. 👍👍👍👍 Thank you

[@rBroneak]

Thanks for the tutorial. Tip to share back. When you break up you’re content you can use semantic html tags and add few identifiers and layout helpers. No need for all the extra divs and class names until it gets “special”. modal..container > header + section+footer Now you can target all your general modal bits via the parent .modal class. .modal header {} Or scss .modal { header{} section{} footer{} &.modal-special { // now when this class is added to your modal you extend the base styles and add more control header { Something: special; } } } Etc. been working for me for a long time to build and extend components and decorators. I use a prefix on the top level class with cp_ or something to denote its a component (used more than once and has a specific style sheet)

[@chandrakant6283]

Brilliantly explained, thanks man. I just needed the right logic to make it work.

[@orkoren2006]

Short and concise Pedro. Thanks!

[@SudaMasakii]

まじで分かりやすい！ 詰まってましたけど先に進むことができました！

[@wawayltd]

Straight to the point in easy and short manner. Thanks!!

[@dawoodshahzad9082]

And now another master piece. Thanks buddy!

[@PedroTechnologies]

You bet! Thank you for the support :)

[@AnshumanBisoyi]

Dude you teach so good, want more vids more on animations from you.

[@joenacouzi558]

in working in a job that requires reactjs and everything i wanna do you have the right tutorial for it . thank you !

[@Kuena866]

PedroTech has been added to my favourite coding channels........... Good work

[@saidmaroc8448]

I was looking at WinBox React when you published this post. Top as usual

[@PedroTechnologies]

Hope you enjoyed it!

[@user-yb5cj5np2x]

Thank you so much for making this video seriously very easy way to create custom model . I watch lots of video but this one is superb🤩🤩🤩🤩🤩

[@ckh8217]

Nice channel Pedro! Just a small tip for the close button, I think the HTML-entity "×" looks better than the letter X

[@pupil_1]

Better to use font awesome

[@GilAguilar]

Thanks for the great video, it was very straight forward and simple to follow.

[@ahmedabdelmoneam9279]

Very useful, simple and obvious. Thanks

[@notcountdankula]

Thank You. Very Helpful Video

[@M4nudu45]

it helped me a lot and I really understood, thanks bro :D

[@dbiswas]

This is simply awesome, exactly what I was looking for. But can you also include on how to pass the return value when Cancel v/s continue is selected? Because based on that input you may want to drive other functionality.

[@igorgoncalves5691]

Nice tutorial Pedro, thanks so much.

[@user-lc6jb7so7h]

this is helpful for me,thank you!!

[@MrAndykofi]

Nice work, subscribed. I like your eloquency.

[@gromfader6559]

This was great! Thank you!

[@quirinopls]

Vlw pedrão, vc é muito brabo cara

[@umadhityamathi6804]

Very much helpful, In right time. Thank you

[@levyroth]

Dude, make a Patreon or something. Great video as always, so clear and straightforward. You should be teaching CS classes for 1st year students or high school students.

[@PedroTechnologies]

Thank you Levy! Some people asked me about a patreon or something like that but I didn't want to make it without giving any other value out of it. But recently I've been setting up the youtube's membership program and I might turn it active soon. Members will be able to access videos before I post and also have badges next to their names. I also recorded like 80 videos explaining coding interview questions when I was studying but I never posted them hahaha so maybe I will post them for members. I am still a junior in college but I wish I could be a professor lmaoo

[@wpxpert98]

I really like your videos, keep it up

[@khizrshaikh9902]

Finally Done After 2-3 days Thanks for this buddy

[@PedroTechnologies]

Nice work!

[@ccnav7249]

Wow....That's Fkn awesome Pedro. Really worked 😍😍

[@Skytrix_limited]

This was awesome. Thank you

[@gustavokazuo1834]

Thank you, I'm brazilian, your video helped me. ;)

[@robertramirez8142]

This a tutorial was very helpful thanks.

[@bubumunhuu4112]

Worked thank you a lot.

[@paragbabiya1798]

bro you save my job thank you

[@pannihto7588]

() => closeModal(false) is a terribly confusing way to close the modal(since the parameter value implies that you're not closing it) . Should have passed closeModal={()=> setModal(false)} and then just call closeModal without any parameters

[@synthrunner4244]

Better yet, create a handleModal function, and change the state of the modal to = setModal(!isOpen). that way its a function that will alway do the opossite of the value inside the modal open state

[@spritemoney]

Where is this at in the video?

[@arinzechukwuhillary0zor644]

Thanks, man for this is helpful

[@joenacouzi558]

You bro are my Reactjs Savior !!!

[@triptichhetri]

Many Many thanks 🙌

[@sophiziia]

Thank you so much!!

[@muhammadjonnazarov146]

Great Tutorial, Thanks alot

[@parasjangid5721]

This is what i say perfect way to explain.....love from india 😍

[@SanjayKumar-un7xf]

Thanks for sharing knowledge :)

[@beekeepingArmenia]

Thank You !

[@kumardipsaha8964]

Thank you so much for this video...🤗🤗🤗

[@ThColinPereira]

this is so cool, thanks bud

[@EkUntoldKahaani]

Thanks mate ❤

[@edenkefale7129]

Thank you!

[@diegoiturra3134]

thanks for help!

[@andrealeon8415]

Gracias me ayudaste mucho

[@austintochukwuasoluka1502]

Thank you so much. What's the difference between this approach and using portals?

[@aliciaweenum1248]

Great video, thank you

[@getuliosouza5512]

Perfect!

[@oussamakrab6378]

Pedro u saved my ass with ur tutorials for my final project thanks buddy

[@PedroTechnologies]

Hahahaha happy to hear it!

[@habibalnoman845]

Nice explanation

[@kwameaddo1007]

great video bro,

[@hastijabbari2413]

so useful thanks

[@oxanasf6369]

Thanks!

[@PanlasangMotour]

Awesome !! Kindly implement some crud operation with db with this modal

[@PedroTechnologies]

Hmm I am honestly thinking about making a video incorporating both cool UI stuff and cool backend stuff. I could defo include a modal :)

[@Adam-vm6tc]

Thank you sir

[@ice12328]

Excellent

[@worldclasscode1847]

Great video! :)

[@danielsantiagocuellarmuril2034]

muy buen video, gracias amigo!!

[@PedroTechnologies]

De nada, gracias por ver el video :)

[@hardwired89]

thanks you pedro 👍👍

[@PedroTechnologies]

Any time!

[@user-cv2ye7ol1m]

perfect 👍👍

[@praisy01]

thank you

[@jasonhuang4333]

Very helpful. Just one question, should we use react.createPortal and render it outside of root div or just use css and html to create a basic modal

[@ashishprasad2163]

Using reactDOM.createPortal is the best approach, highly scalable and no dependencies on third party packages.

[@clairesingson3331]

hi . .good tut . .. just wanna ask if we can make the background transparent so that we would still be seeing our page in the background? do you have a tut regarding that? transparent with modal? thank you ..

[@mutazhusam6397]

thx a lot

[@francescoanastasio2021]

Thank you for the video, I have a question: why we opt for position: fixed; here? Wouldn’t absolute make more sense?

[@growthhacking9126]

Thanks man

[@PedroTechnologies]

Any time!

[@anthonyanselmo9889]

Awesome Video! I was wondering if there is a way to create multiple modals when one closes another opens. For example, I'm creating a site for email templates I use for work. I am trying to get the Modal to open up a form where I insert some information like an email address and a Customers name. I press an enter button in that modal and it will close the form and open the email so I can copy the text. Sorry if this doesn't make sense.

[@toivokalev498]

Спасибо, друг!

[@user-ul2my3wj4n]

tnks

[@marypaul9627]

good job

[@viekva]

god bless you!

[@akashshrestha01]

great

[@joenacouzi558]

I got a question if i wanna do a modal box where i say this good or this is bad do i create 2 modal.js ? or 2 function or can i do 2 functionalities in 1 ?

[@owltrades]

Thanks Pedro for this video, can you please teach us how we can use little bit of animations like smooth scrolling on clicking menu, image unbluring on scrolling to specific section in our web page cause every tutorial sucks they make everything super complicated....

[@PedroTechnologies]

Yeah sure! I am thinking of doing some other UI stuff!

[@abdurrakibrony_518]

nice

[@konstantinsnihyr3408]

what if multiple pages not only App.js so I have to use useState on every page to open/close modal? do you think this is good solution?

[@Usernamesareoutdated]

Many people are calling the Modal from the middle or side of the html document - not from the top. For those who are using the Modal within a nested div and its not centered on the screen, add left:0; right:0; to modalBackground class and change position:relative to position:absolute, and it will take up the expected screen portion.

[@ericmomoh7927]

style={{Margin: "auto"}}

[@zainabideen8144]

What if I want a popup above the content with the backdrop effect?

[@henrykibocha5224]

Thanks for this awesome tut mehn! Can this be a link on the navigation menu eg (signup / login / free trial ) how would that be implemented?

[@rangabharath4253]

awesome

[@PedroTechnologies]

:)

[@thamismedina6394]

I have question, what if a need multiple modals in multiple buttons? how can i do it? is the only way using context?

[@Akash-xv5sk]

How to send an image to backend in an existing form like i have multiple input fields, in that i want to append an image, what are the proper way to send an image to backend. like base64 or JSON.stringify or ..???. I appreciate your effort and thankyou

[@tanmayhedau5342]

❤❤

[@dragosp.7635]

Can you make a video for cookie policy? (displayed like a modal)

[@naumanshigri]

xharingmo xng ly mili ata . du liye na liyahmo yod xug .. very help full

[@itsmayur4845]

hey, I tried this ...my scenario is I am using a button in the form in which Model/popup should be called without rendering the existing form component, but I am unable to do so. Please help!!

[@MenixPL]

What color theme are u use?

[@saurabhranjan4951]

Hey could you explain how to use Modals on already existing button?

[@MilanDrazic]

you did not show how the content disappeared open modal button when you clicked?

[@idanbarzilay5289]

can you make a video on creating a modal with forwardRef useImperativeHandle?

[@sonwander1]

Hello, how to set the modal to open on page load?

[@nedath2085]

tnx

[@MatheusSilva-qm3ph]

Muito bom...

[@augischadiegils.5109]

❤️❤️❤️❤️