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)
() => 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
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
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.
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
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!
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! :)
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
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.
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.
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....
Damn that would've been a cool thing to implement as well, to do that you can just make the background div be clickable and if you click on it you setOpenModal(false)
I actually prefer it doesn't because you could put a form in a modal and you don't want it to go away if you misclick something. Depends on what you want to do with the modal really.
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 ..
At 13:22 you show the modal appearing below the h1 tag from the App component. Then you stop the video and return with CSS that makes the that h1 tag disappear. How? Setting position to fixed for className modalBackground doesn't result in that behavior for me. Did something change in any of the components?
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
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!!
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.
I had to add top: 0, left: 0 after position: fixed or else my modal would not appear at all. If you're putting your model on top of other content you will need the top and left defined to make this layout work.
Thanks for the video! But just a quick question, how would I go about importing that same modal component but just it having extra inputs. Is there a way of doing that? Sorry if the question is unclear
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
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 ?
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'
Pedro, you need to set some admin in your discord community because you're rarely active on discord when there's a problem in your community group. Yesterday there's a spammer on the group, so I hope there's another admin who can ban this person. Or at least, you can check your group very often if you want.
Hey, thank you for letting me know. I saw this a few minutes before you commented and spent some time thinking on what to do. I decided to delete the server. I couldn't manage the server and couldn't be active there because of work/school. So the server would be vulnerable to scammers/bad people. I wouldn't want any of my subs to be scammed so I decided that as long as I can't personally moderate the server, it's better to not have it. Hope you understand!
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)
() => 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
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
Where is this at in the video?
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!
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.
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
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!
Nice channel Pedro! Just a small tip for the close button, I think the HTML-entity "×" looks better than the letter X
Better to use font awesome
PedroTech has been added to my favourite coding channels........... Good work
Pedro u saved my ass with ur tutorials for my final project thanks buddy
Hahahaha happy to hear it!
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! :)
Straight to the point in easy and short manner. Thanks!!
まじで分かりやすい！
詰まってましたけど先に進むことができました！
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
Brilliantly explained, thanks man.
I just needed the right logic to make it work.
Dude you teach so good, want more vids more on animations from you.
I was looking at WinBox React when you published this post. Top as usual
Hope you enjoyed it!
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.
Finally Done After 2-3 days
Thanks for this buddy
Nice work!
in working in a job that requires reactjs and everything i wanna do you have the right tutorial for it . thank you !
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🤩🤩🤩🤩🤩
And now another master piece. Thanks buddy!
You bet! Thank you for the support :)
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.
style={{Margin: "auto"}}
Thank you so much.
What's the difference between this approach and using portals?
Short and concise Pedro. Thanks!
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....
Yeah sure! I am thinking of doing some other UI stuff!
Wow....That's Fkn awesome Pedro. Really worked 😍😍
This is what i say perfect way to explain.....love from india 😍
Thank you, I'm brazilian, your video helped me. ;)
Awesome !! Kindly implement some crud operation with db with this modal
Hmm I am honestly thinking about making a video incorporating both cool UI stuff and cool backend stuff. I could defo include a modal :)
Nice work, subscribed. I like your eloquency.
Thank you for the video, I have a question: why we opt for position: fixed; here? Wouldn’t absolute make more sense?
Pedro this modal should close on clicking background or clicking outside of the actual modal.
Damn that would've been a cool thing to implement as well, to do that you can just make the background div be clickable and if you click on it you setOpenModal(false)
I actually prefer it doesn't because you could put a form in a modal and you don't want it to go away if you misclick something. Depends on what you want to do with the modal really.
@@PedroTechnologies But won't that make everything also close on click since that div wraps everything within?
you did not show how the content disappeared
open modal button when you clicked?
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
Using reactDOM.createPortal is the best approach, highly scalable and no dependencies on third party packages.
You bro are my Reactjs Savior !!!
Very useful, simple and obvious. Thanks
Thanks for the great video, it was very straight forward and simple to follow.
Nice tutorial Pedro, thanks so much.
Very much helpful, In right time.
Thank you
Vlw pedrão, vc é muito brabo cara
bro you save my job thank you
it helped me a lot and I really understood, thanks bro :D
Thank You. Very Helpful Video
This a tutorial was very helpful thanks.
I really like your videos, keep it up
Hey, Could you make a tutorial on how to Handle Multiple Modals in a Single Component using useState ?
Would really like to see you do this @pedro
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 ..
At 13:22 you show the modal appearing below the h1 tag from the App component. Then you stop the video and return with CSS that makes the that h1 tag disappear. How? Setting position to fixed for className modalBackground doesn't result in that behavior for me. Did something change in any of the components?
Will need to include top: 0 and left: 0 to achieve this look
this is helpful for me,thank you!!
Hey could you explain how to use Modals on already existing button?
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
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!!
I have question, what if a need multiple modals in multiple buttons? how can i do it? is the only way using context?
This was great! Thank you!
What if I want a popup above the content with the backdrop effect?
can you make a video on creating a modal with forwardRef useImperativeHandle?
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.
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?
thanks you pedro 👍👍
Any time!
Worked thank you a lot.
Wait, the content in the main page is gone when you open the modal.
Can you make a video for cookie policy? (displayed like a modal)
Great Tutorial, Thanks alot
I had to add top: 0, left: 0 after position: fixed or else my modal would not appear at all. If you're putting your model on top of other content you will need the top and left defined to make this layout work.
Hello, how to set the modal to open on page load?
How to close when click outside modal?
Thanks, man for this is helpful
Hmm, when I download your code and open the modal, the text and open button dont disappear
Thank you so much for this video...🤗🤗🤗
Thanks for the video! But just a quick question, how would I go about importing that same modal component but just it having extra inputs. Is there a way of doing that? Sorry if the question is unclear
you can use condition rendering inside the model component and change the conditions on your clicks
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
Nice explanation
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 ?
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'
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?
Thanks for sharing knowledge :)
muy buen video, gracias amigo!!
De nada, gracias por ver el video :)
How to perform Crud operations inside the Modal...!
How can i open new modal from other modal?
Why do you always write space after opening tags?
What color theme are u use?
this is so cool, thanks bud
xharingmo xng ly mili ata . du liye na liyahmo yod xug .. very help full
opa eae, daria para fazer usando context tbm né?
Sim! Da pra fazer muita coisas com modal, essa versão acabou ficando bem simples!
what about modal on top of modal?
Pedro, you need to set some admin in your discord community because you're rarely active on discord when there's a problem in your community group. Yesterday there's a spammer on the group, so I hope there's another admin who can ban this person. Or at least, you can check your group very often if you want.
Hey, thank you for letting me know. I saw this a few minutes before you commented and spent some time thinking on what to do. I decided to delete the server. I couldn't manage the server and couldn't be active there because of work/school. So the server would be vulnerable to scammers/bad people. I wouldn't want any of my subs to be scammed so I decided that as long as I can't personally moderate the server, it's better to not have it. Hope you understand!
Gracias me ayudaste mucho
Como eu faria para avançar de um modal para o outro?
thanks for video i like
Great video! :)
great video bro,
Great video, thank you
please tell me does it work on react-native?
Many Many thanks 🙌
Thank you so much!!
can i add video in this modal ?
You have to show the css which you not created in video..
Pedro please create tutorial react hooks with firebase for beginnner
Но что если на странице должно быть несколько модальных окон с разным контентом?
I don't know what that means hahaha but my answer is yes
Just translated it hahaha, if you want multiple modals then you can pass the title, the description and the button through props.
Thanks man
Any time!
Excellent video on creating a Modal Component. Thanks, Pedro
{2022-02-22}