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!

-
-

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Equipments I Use:
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

[pannihto]

() => 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

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

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

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

[ckh]

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

[oussamakrab]

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

[wawayltd]

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

[dawoodshahzad]

And now another master piece. Thanks buddy!

[chandrakant]

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

[amanpreetsingh]

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

[jaia]

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

[Kuena]

PedroTech has been added to my favourite coding Good work

[khizrshaikh]

Finally Done After 2-3 days
Thanks for this buddy

[francescoanastasio]

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

[saidmaroc]

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

[AarviJain-vm]

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

[AnshumanBisoyi]

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

[austintochukwuasoluka]

Thank you so much.

What's the difference between this approach and using portals?

[joenacouzi]

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