Modal in Next.js & React | Create a Dialog Component

[@dhruvsambhariya9689]

Just A request Sir Dave,would you make a video on Adding Payment Gateway to your website?

[@wchorski]

Started watching you on React Page router tutorials. Thanks for keeping your great pacing and detailed explanations. AND putting source code in description

[@nidhalbettaibi488]

That's great. Thanks for sharing probably a small refactoring that could be added to your Dialog component is that instead of closing the Dialog whenever showDialog property has changed. We could just close it when the component will unmount

[@versaleyoutubevanced8647]

Another great tutorial Dave! But since I use a lot of abstractions, like Shadcn and Radix library, which handle a lot of things out of the box, I wonder how can make this integration with these components libraries Also, the way these libraries handle the trigger seems very interesting, would love a video in your explanation, how to create a robust component like the ones i mentioned

[@DaveGrayTeachesCode]

I should take a look. I've heard good things and that they are very customizable. That would hopefully allow the logic to be applied in a very similar way.

[@versaleyoutubevanced8647]

@@DaveGrayTeachesCode I'm looking forward to see it ;)

[@alexandrekikvidze2060]

What about createPortal?@@DaveGrayTeachesCode

[@srsrajesh8385]

Yes, that would be an interesting one

[@mcFishXtraMayo]

Your tutorials are great. Thank you for teaching us! 🙃

[@markdenvermanuel8493]

So awesome as always, Dave! Thank you!

[@nuancetone]

Hey Dave, great video. Thanks for this. Attempting to implement in NextJS 14. Working well. However, if I click the 'X' button, the dialog does disappear but the URL stays the same, as in, still showing the query params. I tried using the router.back() method for this programmatically but that's not the best option. How should I go about removing the showDialog=y part of the user want to close the dialog? Thanks

[@mahdiboughanmi6781]

Thank you for your time !! learned much from you

[@Vivek-tr4ln]

Great tutorial Dave. Can you make a video on implementing csp headers in app router for both ssg and ssr. Suggestions from anyone is appreciated as i m stucked.

[@ashimov1970]

Dave, your vids are very helpful. You manage to convey important info in a very comprehensible manner. Thank you very much indeed and God bless. Though I wonder what your take is on accomplishing the same functionality with Routing features instead of dialog.

[@deadchannel8431]

If there's multiple modals components on the same page and you open one, wouldn't they all open at the same time?

[@darshandev1754]

create different url params for each, like student-modal, product-modal

[@고민영-y7s]

Nice tutorial Dave. Learnt a lot. Quick question, what if u have a gallery page with multiple image cards and if u click the card, modal opens with clicked image. Should i put searchurl for a modal in my current link and how would you deal with children (image) prop??

[@weiwei2694-q2h]

Thank you so much Dave!

[@treyrader]

So ive come across this vid because i am trying to figure out out to prevent underlying scroll when modals are open. I am thinking that i use a global state and dynamically add a className to the body element of fixed position if onOpen is true. I actually love the idea of storing the value in the search params like this! I am going to see if this will work since the root layout must be a server component in app router. Thanks man!

[@patienceadajah]

This is good but how do you make the modal reusable? Say you have two modal in one component.

[@patite3103]

Great video as usual! Could you make a video on the best way to handle forms in Next.js with server actions? Would it be better than using the React form element? Thank you in advance!

[@DaveGrayTeachesCode]

Thank you - I think I remember covering forms and optimistic updates with server actions in my server actions video. If you haven't watched it, start there.

[@xc13z829]

How do you keep the page from scrolling behind the modal? The only solution I've been able to find is to use JS to do document.body.style.overflow = 'hidden' when the modal is shown. Any other suggestions?

[@MOJICA7257]

Thanks Dave! Cheers 🎉🎉🎉

[@DaveGrayTeachesCode]

Welcome!

[@p1erceprc]

Very good video! One question, what if I want to enable modal on the first request of particular route? Should I save the "showDialog" in localStorage/sessionStorage/cookies? Thank you

[@AllysonTS]

Do you think that can work with something like a health app in this particular scenario: I opened a modal/dialog to add a new patient, but one of the fields would be to link a doctor to this patient, but in this case I also need to add a new doctor, and with that I open a new modal/dialog add the doctor and then I need to go back to the patient's modal with the new doctor added. Because it's the different route, can you tell me if the patient's modal would be closed and the filled information lost when I open the doctor's? (I hope you understood, english is not my primary language 😅)

[@TravinskiyVladislav]

Thank you Dave

[@lp26197]

I want to learn the congenital interface with any language that you advise and followed by a request because and in the future I'm confused if you allow C # or Javascript. And thank you

[@wchorski]

trying to find a work around for this edge case 1. User clicks modal 2. user closes/ok's modal 3. on the same page, user clicks the modal link (adding the "?showDialog=y"), but that's already attached to the url 4. the modal does not appear right now in the "Dialog.tsx" component I'm using the "useRouter" to "router.back()" when the dialog is closed/ok'd. is there a better way to do this?

[@DaveGrayTeachesCode]

Not sure I understand, but are you adding the showDialog to the URL twice on your step 3? One way to show the modal again is to use router.refresh which will refresh the page and reload the modal.

[@chadborghinibeats8675]

Hey love the videos and i just subbed to your channel. Could you please make a video regarding csrf protection in the new app router dir🙏? There seems to be no packages for the new update and there really isn't many videos covering how to create your own either or really explaing how csrf works.

[@khalilbenmeziane8836]

thank you dave

[@Myszko3321]

In our production application we use modals as a part of a flow of document creation. The modal is the last step, e.g. users fill out a form and the dialog is a final confirmation that also uses partial data from the form. I'm wondering - is there a common solution that would prevent the user from manually accessing the modal using URL Params, before we as the developers want to show it? How could you handle that case with URL Params?

[@DaveGrayTeachesCode]

As part of a flow for document creation.. this is a case for a unique URL as mentioned in the tweet by Cory House. Using URL params is an extraction so a modal can be added at will to any other page.

[@stevebendersky2056]

If the component I am calling the dialog from is a client component, what should I do?

[@first275]

Nice tutorial but wondering why you did not use portals to render a modal or dialog component, its better to keep popups out of the main dom tree also can you please make a video on tanstack react table?

[@DaveGrayTeachesCode]

Don't get caught up in thinking there is only one correct way to do something. In reference to your portals question, there is usually more than one way to achieve the same goal. And thank you for the request.

[@kimayapanash8998]

Hey share tips and tricks to get bettwe at problem solving and how to learn new tech quickly

[@DaveGrayTeachesCode]

Good suggestions - my thoughts: the more projects you work on, the better you will become at problem solving. Take big problems and break the down into smaller and smaller parts. Learning new tech quickly also comes with more experience because that makes the learning curve not as steep.

[@GeminiLearning]

Thanks Dave for the great video!. How can you make a modal/dialog draggable and resizable?

[@DaveGrayTeachesCode]

That would make another good small project and/or video. This search should help you: www.google.com/search?q=make+a+dialog+element+resizable+draggable

[@first275]

you can use framermotion

[@yuriikryvoviaz2694]

Hi. Do anybody know how is this theme of the vscode called?

[@saddamansari5223]

Hey I have questions if we did not use useState then later we useEffect can we do without it?

[@Akhmed-o7h]

Better it to do with parallel routes

[@ThanHtutZaw3]

I can't animate dialog with framer motion .

[@XprimeX-q7l]

Isnt this too complex? Making a simple modal in react is also a task and here it is some crazy thing going

[@codernerd7076]

Will there be more python videos?

[@DaveGrayTeachesCode]

Yes, there will be.

[@codernerd7076]

@DaveGrayTeachesCode great really getting into python now here!

[@nicolasingala269]

That's great. thx. now i'm trying make a modal whitout ts.