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

[@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! :)

[@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!

[@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!

[@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.

[@SudaMasakii]

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

[@wawayltd]

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

[@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.

[@orkoren2006]

Short and concise Pedro. Thanks!

[@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

[@joenacouzi558]

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

[@AnshumanBisoyi]

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

[@dawoodshahzad9082]

And now another master piece. Thanks buddy!

[@PedroTechnologies]

You bet! Thank you for the support :)

[@saidmaroc8448]

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

[@PedroTechnologies]

Hope you enjoyed it!

[@Kuena866]

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

[@GilAguilar]

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

[@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🤩🤩🤩🤩🤩

[@M4nudu45]

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

[@MrAndykofi]

Nice work, subscribed. I like your eloquency.

[@ahmedabdelmoneam9279]

Very useful, simple and obvious. Thanks

[@quirinopls]

Vlw pedrão, vc é muito brabo cara

[@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

[@notcountdankula]

Thank You. Very Helpful Video

[@umadhityamathi6804]

Very much helpful, In right time. Thank you

[@wpxpert98]

I really like your videos, keep it up

[@khizrshaikh9902]

Finally Done After 2-3 days Thanks for this buddy

[@PedroTechnologies]

Nice work!

[@igorgoncalves5691]

Nice tutorial Pedro, thanks so much.

[@user-lc6jb7so7h]

this is helpful for me,thank you!!

[@gromfader6559]

This was great! Thank you!

[@gustavokazuo1834]

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

[@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?

[@ccnav7249]

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

[@robertramirez8142]

This a tutorial was very helpful thanks.

[@joenacouzi558]

You bro are my Reactjs Savior !!!

[@austintochukwuasoluka1502]

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

[@Skytrix_limited]

This was awesome. Thank you

[@bubumunhuu4112]

Worked thank you a lot.

[@parasjangid5721]

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

[@paragbabiya1798]

bro you save my job thank you

[@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.

[@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 ..

[@beekeepingArmenia]

Thank You !

[@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 :)

[@ThColinPereira]

this is so cool, thanks bud

[@sophiziia]

Thank you so much!!

[@arinzechukwuhillary0zor644]

Thanks, man for this is helpful

[@triptichhetri]

Many Many thanks 🙌

[@muhammadjonnazarov146]

Great Tutorial, Thanks alot

[@andrealeon8415]

Gracias me ayudaste mucho

[@EkUntoldKahaani]

Thanks mate ❤

[@kumardipsaha8964]

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

[@oussamakrab6378]

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

[@PedroTechnologies]

Hahahaha happy to hear it!

[@SanjayKumar-un7xf]

Thanks for sharing knowledge :)

[@habibalnoman845]

Nice explanation

[@edenkefale7129]

Thank you!

[@aliciaweenum1248]

Great video, thank you

[@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 ?

[@diegoiturra3134]

thanks for help!

[@getuliosouza5512]

Perfect!

[@hastijabbari2413]

so useful thanks

[@hardwired89]

thanks you pedro 👍👍

[@PedroTechnologies]

Any time!

[@kwameaddo1007]

great video bro,

[@oxanasf6369]

Thanks!

[@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?

[@danielsantiagocuellarmuril2034]

muy buen video, gracias amigo!!

[@PedroTechnologies]

De nada, gracias por ver el video :)

[@zainabideen8144]

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

[@francescoanastasio2021]

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

[@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!!

[@thamismedina6394]

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

[@Adam-vm6tc]

Thank you sir

[@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

[@ice12328]

Excellent

[@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?

[@worldclasscode1847]

Great video! :)

[@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.

[@growthhacking9126]

Thanks man

[@PedroTechnologies]

Any time!

[@sonwander1]

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

[@TheCataguases]

Como eu faria para avançar de um modal para o outro?

[@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!

[@MilanDrazic]

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

[@marypaul9627]

good job

[@user-cv2ye7ol1m]

perfect 👍👍

[@walterhumphreys671]

const [display, setDisplay] = React.useState(false); the modal is not listening and it always keeps open, if i use const [display, setDisplay] = React.useState(initialState:false);, i the error The type cast expression is expected to be wrapped with parenthesis,, and if do, const [display, setDisplay] = React.useState({initialState:false}); it still does nothing the modal is always open and close button don't work either

[@dragosp.7635]

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

[@saurabhranjan4951]

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

[@gamerpotato2463]

Wait, the content in the main page is gone when you open the modal.

[@praisy01]

thank you

[@JadeclonOfficial]

Hmm, when I download your code and open the modal, the text and open button dont disappear

[@uwuslayer0211]

getting Uncaught (in promise) Error: Cannot find module when i try to import the css file even though the css file is in the same directory as the App.js. im trying to import the css by import './form_style.css'

[@haian_]

How to close when click outside modal?

[@mutazhusam6397]

thx a lot

[@Leo-es3fq]

How can i open new modal from other modal?

[@JasurHaydarovChannel]

thanks for video i like

[@naumanshigri]

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

[@viekva]

god bless you!

[@user-ul2my3wj4n]

tnks

[@MenixPL]

What color theme are u use?

[@idanbarzilay5289]

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

[@akashshrestha01]

great