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
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!
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
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! :)
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.
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.
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
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.
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!!
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
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....
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?
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 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 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.
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.
You can definitely do this! Whenever I implement an app where I can update a user info, I always pop a modal to confirm if they want to proceed with the changes!
@@MrFyce the crud video was mainly for beginners so i didnt want to overcomplicate it by adding a modal. But if you want to make it happen with a modal, you can add the axios api call inside of the modal! Or you can create a function that calls the update api request and pass it as props to the modal
@@PedroTechnologies oh so basically the edit function is not called on click on the update button but on the ok button of the modal but I have to pass it as props?
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?
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!
PedroTech has been added to my favourite coding channels........... Good work
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
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!
Straight to the point in easy and short manner. Thanks!!
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
Finally Done After 2-3 days
Thanks for this buddy
Nice work!
Pedro u saved my ass with ur tutorials for my final project thanks buddy
Hahahaha happy to hear it!
And now another master piece. Thanks buddy!
You bet! Thank you for the support :)
まじで分かりやすい！
詰まってましたけど先に進むことができました！
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.
What's the difference between this approach and using portals?
I was looking at WinBox React when you published this post. Top as usual
Hope you enjoyed it!
Thank you for the video, I have a question: why we opt for position: fixed; here? Wouldn’t absolute make more sense?
Dude you teach so good, want more vids more on animations from you.
Short and concise Pedro. Thanks!
Wow....That's Fkn awesome Pedro. Really worked 😍😍
Brilliantly explained, thanks man.
I just needed the right logic to make it work.
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"}}
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.
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 what i say perfect way to explain.....love from india 😍
you did not show how the content disappeared
open modal button when you clicked?
Thank you, I'm brazilian, your video helped me. ;)
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🤩🤩🤩🤩🤩
You bro are my Reactjs Savior !!!
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.
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?
Nice work, subscribed. I like your eloquency.
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?
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?
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
Very useful, simple and obvious. 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!
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 ..
Vlw pedrão, vc é muito brabo cara
bro you save my job thank you
Very much helpful, In right time.
Thank you
Nice tutorial Pedro, thanks so much.
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
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 ?
I really like your videos, keep it up
Thank You. Very Helpful Video
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 :)
Thanks a lot enjoyed it
this is helpful for me,thank you!!
What if I want a popup above the content with the backdrop effect?
Thanks for the great video, it was very straight forward and simple to follow.
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 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
This a tutorial was very helpful thanks.
Hello, how to set the modal to open on page load?
What color theme are u use?
it helped me a lot and I really understood, thanks bro :D
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
Hey could you explain how to use Modals on already existing button?
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.
Wait, the content in the main page is gone when you open the modal.
Hmm, when I download your code and open the modal, the text and open button dont disappear
This was great! Thank you!
How to close when click outside modal?
Worked thank you a lot.
Thank you so much for this video...🤗🤗🤗
Nice explanation
Thanks, man for this is helpful
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.
Great Tutorial, Thanks alot
can you make a video on creating a modal with forwardRef useImperativeHandle?
Can you make a video for cookie policy? (displayed like a modal)
Thanks for sharing knowledge :)
thanks you pedro 👍👍
Any time!
opa eae, daria para fazer usando context tbm né?
Sim! Da pra fazer muita coisas com modal, essa versão acabou ficando bem simples!
muy buen video, gracias amigo!!
De nada, gracias por ver el video :)
Como eu faria para avançar de um modal para o outro?
please tell me does it work on react-native?
How can i open new modal from other modal?
Why do you always write space after opening tags?
Gracias me ayudaste mucho
can i add video in this modal ?
this is so cool, thanks bud
what about modal on top of modal?
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
How to perform Crud operations inside the Modal...!
xharingmo xng ly mili ata . du liye na liyahmo yod xug .. very help full
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?
Но что если на странице должно быть несколько модальных окон с разным контентом?
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.
Thank you so much!!
great video bro,
Great video, thank you
Many Many thanks 🙌
thanks for video i like
Thanks man
Any time!
Thanks mate ❤
can we use this for crud edit?
should probably have shown a functionality Implemented on continue
You can definitely do this! Whenever I implement an app where I can update a user info, I always pop a modal to confirm if they want to proceed with the changes!
@@PedroTechnologies ur current crud tutorial doesn’t though? So the edit function should be called in the modal.js or app.js?
@@MrFyce the crud video was mainly for beginners so i didnt want to overcomplicate it by adding a modal. But if you want to make it happen with a modal, you can add the axios api call inside of the modal! Or you can create a function that calls the update api request and pass it as props to the modal
@@PedroTechnologies oh so basically the edit function is not called on click on the update button but on the ok button of the modal but I have to pass it as props?
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!
Pedro please create tutorial react hooks with firebase for beginnner