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

today we will build a reusable dialog modal component for react and xjs and look at why managing the state with URL params instead of the use State Hook is a good idea [Music] hello and welcome I'm Dave today we will dive into modal components for react and xjs and I'll provide links to all resources in the description below I'll also provide a link for you to join my Discord server where you can discuss web development with other students and you can ask questions that I can answer and receive help from other viewers too I look forward to seeing you there before we get started in vs code let's cover the goals for today's videos and those goals are to build a reusable dialogue slash modal component for react or next JS to learn the simple difference between dialogues and modals examine why managing the state of a component with URL params provides benefits over the use statehook and finally understand one big difference between react and xjs when you create this reusable component so let's look at the code we're starting with you can see I've already started a new next JS project now you can start a new react or nextgis project to use this modal that we're are going to create today either is fine really but if you want to follow my code exactly I recommend next JS I'm also going to be using typescript and Tailwind now you can see my next JS project has a products path right over here now inside there we've got the page.tsx and you can see this is a very simple page right now it has a react fragment here that wraps the other elements we've got a heading we've got a link back to the home page and then we've got a section that just has seven paragraphs of lorem epson just enough so I could scroll the page when we load this up in the browser so you can see the scroll action other than that there's nothing else in the page now when we go to the home page we can see it has a heading as well and then it has two links and both of these links go to that products page but the difference is the first one goes to the products it says with modal but we'll have this with dialog or with modal either one but it has the URL param in here that says show dialog equal to y for yes and other than that the other link just goes to products so it goes to the same page but one is going to display a modal or a dialog and one will not so let's start creating our component and make all of this work we'll do that by creating a new directory and we're going to call this one components which is where we would probably store this and now inside let's create a component called dialog.tsx now this is going to be a client component so we'll start with use client after that let's do a couple of imports we're going to import use search params now this is something we're going to get from next navigation now in react you would want to get the search params or any params from the URL in a different way but I just want to mention that because I'm specifically using next JS here but there are of course several ways to get params out of a URL now besides that we need to import use ref and use effect and both of those are going to come from react now let's set up our props I'm going to say type props equals our object it's going to have a title that we can pass in and now besides that we're going to pass in a couple of functions this would depend on how many buttons or clickable things you have inside of your dialog or modal for this example I'm going to have two so that's how many functions I'm going to have so I'm going to have on close which would be if we click the red X in the top right and so we'll just say this is a function that has void here and then we'll also have on OK which would be clicking the OK button and this as well will be a function with void for now then we'll say children and this is going to be the children of the dialogue and here we'll have react dot react node just like you see for children in the layout component here when you see this set up and here we have children which is react dot react node as well and we pass those children in the layout component we'll do the same in this dialog component now we're ready to start the component itself so I'm going to use RFC which is is my es7 react Snippets extension that helps me quickly create a function here so I've got export default function and then says dialog and that is correct that's exactly what we want now we're going to pass in the title are on close on OK and children and now since we've defined props after that we can just put props need the S there we go and then I'm going to alt Z to wrap that down so we can see everything without it scrolling off the page now let's create a little bit of room after we've started our function before the return and we can start here by getting the search param so we'll say const search params and we'll set this equal to use search params and then we're also going to need a ref for our dialog so here I'm going to say const dialog ref and we're going to set this equal to use ref and just to clear up any confusion I'm going to reference dialog because it's going to be a dialog element but we can switch this between a dialog and a modal at different times and we'll discuss that difference so this use ref could be null or it could also be HTML dialog element there we go and we're going to start with null and that's specifically why we need it to possibly be null then we're going to say const show dialog we're going to set this equal to search params dot get and then we can get that show dialog value out of the URL which would be the param value if show dialog is passed now I'm going to set up my use effect that we imported up here so down below this we'll say use effect starts with a function now inside this function we're going to have an if statement so we'll say if show dialog equals and we'll use strict equals y which is the value we are passing to say yes we want to show the dialog then we'll say dialogref dot current now we'll use optional chaining and we'll say show and that's just the method we call now here is the difference between a dialog and a modal this would be a dialog that we show if we want to show a modal we need to say show modal so this is the main difference in our code that determines whether we're showing a dialog or a modal and that's really all there is to it now when we show the action in the browser actually you know the app in action then I'll show you the difference and what happens in the browser between a modal and a dialog as well so I'll leave this as modal for now so we're going to be showing a modal first in our example after that we'll have else and then we'll say dialog ref dot current once again optional chaining again and close so if it's not y then we're going to call call the close method on the dialog ref and we're going to put this dialog ref on our dialog element and now we do have a dependency here in use effect this is going to be the show dialog value so anytime this show dialog value would change that's when we want the use effect function to run and now we're not going to pass the on close or the on OK directly into our jsx below instead we're going to wrap those in functions here so now I'm going to say const close dialog and I'll set this equal to an arrow function I still like to write Arrow functions and then inside the arrow function I'm going to say dialog ref once again dot current and then call close after that optional chaining and then I also want the on close function so this on close function is whatever we want to happen when the dialog or the modal is closed and of course this closes the dialog or modal here so wrapping those in one function that we can then put in our jsx makes sense now after that I'm also going to say const and I'll call this click ok set this equal to an arrow function as well and inside of here I'm going to call the on ok but then after that I want to call everything that's in the close dialog so then I'll just have close dialog here to call as well so I can call both of those and I'll pass that as click OK and now I want to scroll for some room because what we're going to do is Define a ternary with our dialog value and then just return the dialog so I'm going to say const dialog and this is going to be a jsx DOT element or it could also be null and then we'll set this equal to now this is the part of the ternary statement that we're checking show dialog if it equals the Y once again so if we are showing the dialog then we're going to have a value here after the question mark and this would be the truthy value if this is true then dialog will equal this if not this is a ternary statement and we'll just have it equal null so it will not be equal to anything at that point now here we're just going to return dialog so now we're just left with what happens when show dialog is actually equal to Y and we want to see the dialog I'm going to scroll just a little bit more and now inside of this ternary if we want to show the dialog we'll start with our dialog element and from there not their dialog graph I guess I should have just typed the element as it was but here I want a ref and I want to set that equal to the dialog ref and after that I'm just going to close it out here but this is going to be our parent element now we'll have several divs inside and I'll explain these as we go I'm not going to add all of the Tailwind classes as we go this is not a Tailwind tutorial I'll come back and add those but first of all we want to have a parent div right here now this parent div is going to contain everything else so I'm going to end up making it a flex box that is flex columns so everything inside of it will be stacked so I'm going to have my title bar and that's going to be in a div and then after that I'm also going to have the body of the dialog and that's going to be in a div so what's going to happen here is this Flex box is going to be a column and it's going to stack these two so we have our title bar and then the body now our title bar will also be a flex box but instead of column it will be Flex row and I'll have everything like Justified apart so the space between essentially it will push left push right I'll have the title to the left I'll have the red X to the right so I'm going to start with the title here and it'll be in an H1 and I'll just pass in the title value that we've got now the Red X is going to be a button so here we'll have our button element and it's going to have well let me go ahead and just create the button element first and then here I'm going to come down and say this is going to have an on click we're going to set this equal to the close dialog function that we created up here right close dialog right there so we want to pass that in and call that if the Red X is clicked now after that we should be able to go ahead and close out the button now what is going to be on the button well that's going to be the letter X so you can see that right here so that would be our red X I'll come back and add the class names for the Styles later now the second div is the body so it's going to hold the children here so I'm just going to pass in children right there but now I also want a green OK button at the bottom so I need to add another div and now this div is going to be a flex row that I'll set to justify end which will push my green OK button to the right so here I'm going to have another button and inside this button I'm going to have the word okay but I need to go ahead and set the on click for the button here as well this on click oops on click there we go set that equal to our click OK function that we defined above so that's the actual logic to it without all of the Tailwind classes to make it look a little more confusing but we did set up a div structure here that will allow me to apply the CSS the way I want to with those Flex boxes okay and now we're back looking at the same component with all of the Tailwind classes in now I'm going to provide this in the source code that's Linked In the description for this lesson but I'm not going to go over all the classes that I applied to create this modal you can play around with it and of course make it your own one we can come back to discuss though is the pseudo element backdrop that applies to the dialog element because that's kind of important when you see that and that's another thing about telling the difference between a dialogue and a modal so now that we've created this dialog component let's go back to the page in the products path and apply this dialog log to this page so we'll start off by importing we'll say import dialog comes from components dialog and now we need to use that dialog right here in our component so we'll start here and we'll say dialogue and it's going to receive a title we'll set this equal to oops I don't even need the curly brackets I can just use quotes there and say example modal after that I'm going to have an on close function that we haven't defined yet and then I'm going to have an on OK function that we haven't defined yet and then we'll go ahead and close that out now inside of here would be the children this is whatever you put in I'm going to put in a paragraph of lorem epson so this would be in the body of our modal or dialog so here I'm going to use an image shortcut and just say p and then put the greater than symbol and type lorem press tab it gives us one paragraph of lorem epson so that is the children of our dialogue for this component okay and we're ready to discuss the big difference whether you're creating this for next JS or for react if you're creating a for react all of your components are client components so it's no problem you could just create the on close function and the on OK function up here and pass them into the dialogue component that's also a client component and there's no problem but in next JS products is a server component and dialog is a client component we're going to create the functions up here but you can't just pass those in as you would expect to because these would be server functions or server code you can't just pass in functions created on the server into your client component because think about this it's interpreted on the server as node.js really and on the client of course it's your vanilla.js what's typically interpreted in the browser that we've known as JavaScript forever but there is a difference so we can't just take one and pass it in let's go ahead and create these functions first so I'll say async function and I'm just going to make them very simple so I'll say on close and now inside of this function I'm going to say console.log and we'll say modal has closed now where would this log this would log on the server because this is a server function I'm going to just highlight all of that use shift alt and the down arrow and create another function that is very similar but this one is on OK and here we'll just say OK was clicked so change that to OK was clicked so to just example functions but the problem is right now and you can try this if you want to if you're using xjs just pass these functions in and see the error that nextjs will give you these won't work what you need to do is use the new server actions now we need to enable this as well in our next JS config because there's still still experimental but here we can say use server and then we can pass on close in and we can do the same with on OK so now if you run the code with these and of course we're going to enable server actions yet in our config or you'll still have a problem but for now with this code that we have here it will be okay as server actions so let's go to that next config.js file and here it is inside of our next config we need to enable the server actions they're under experimental and then we'll say well we have an object and then we say server actions and then we just say true now we have enabled server actions and our code will run with us passing those functions down into our dialog that is a client component even though these are server functions they're server actions and we will be able to call them from inside of the dialog now I have a tutorial on server actions and you should check out that video to learn more about them because there's things you can and cannot do and I'm not going to get into all of that because I've already covered it in this other video so I'm going to link to that in the description as well and I should have it pop up here on the screen so you can click on it too now we should be ready to test out our project so let's open up a terminal with control in the back tick type npm run Dev to launch the product it should start on localhost 3000 there we go I'm going to hold down control and click to launch that in the browser I'll pull up the browser and we will check it out okay we've got our home page with the two links both linked to that same products page one will have the modal and one will not so let's look at it without and here's our page without it has seven paragraphs I can scroll it just a little bit as the home title and it says go to home that's fine now let's look at it with the modal and now you can see it looks different the colors behind look different and then of course here's our modal now as I talked about how I did the layout here is that title bar and I push the title to the left and the close button to the right then we have the children which was that one paragraph of lorem epson right here and then down here I had that other div that was a row a flex row and I pushed our Justified to the end so I got my OK button here at the end so if I click close it will close and if I click OK of course it will also close but notice right now this is a modal and that changed the color of the background because it used that backdrop pseudo element that we styled as well on the dialog element that only happens with the modal though and I can scroll the page but that's the only other interaction I can do everything else I have to click or get rid of the modal my link up here go to home it doesn't turn into a pointer I can't use it right now so what I have to do is interact with the modal and one way or the other I'm going to go ahead and close it and now the color changed back now I can interact with the page and I'll go home likewise let's go ahead and pull vs code back up here real quick and we can see our function worked and it logged modal has closed that was our server action and it ran on the server because this is the terminal for the server so let's quickly go back to our code because these changes should apply right away I'm back in the dialog I'm going to scroll up here to where we have show modal I'm going to switch this now and I'm just going to say show so that's the show method and that shows a dialog instead of a modal and we can look at the difference so now if we go back to the browser and if I go to products with modal this is a dialog notice the color behind did not change I can scroll the page and I can even interact with the page and it doesn't prevent me from any of the page interactions it does show the dialog but it doesn't make those other changes so so that is truly the difference between a modal and a dialogue so now let's talk about why we want to manage the state and actually control the modal or dialogue with a link like we are instead of using use State inside the modal or dialog well a tweet from Corey house got me started thinking about this and it all checked out so users can bookmark or share a link to the open dialog that's absolutely correct and of course if you don't want to use a dialogue with that same page you can eliminate it by just removing the param from the URL so if a dialog represents a unique location is what he says it warrants a unique URL but imagine you want a page sometimes to have a dialogue and sometimes not this gives you a lot more flexibility this way and then it says you can use a plain anchor to open the dialog and that's what we're doing with these links when we click this and it opens a dialog right there that's just a plane anchor link I'm using one in next JS but it's still a plain anchor link is what that turns into and semantically that's the proper way to do it so I really like this and it lets me adapt a dialogue where I need to provide it and some have also mentioned that hey they can close the dialog with the back button as well and they like that too so overall today I hope I've helped you create a reusable modal or dialogue and I hope I've also helped you think about that in next JS when you want to pass in those functions from the server to a client component it's not as easy as it may seem it's definitely not like it used to be in react because you're taking server code to the client so you need to make those server actions remember to keep striving for Progress over Perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day let's write more code together very soon

Channel: Dave Gray

Views: 23,048

Keywords: modal in next.js, create modal in nextjs, modal in react, next.js modal, react modal, dialog in next.js, dialog in react, next.js dialog, react dialog, modal component, dialog component, url parameters, usestate, create a modal in next.js, create a modal in react, build a modal in next.js, build a modal in react, build a next.js modal, build a react modal, create a next.js modal, create a next.js dialog, create a react dialog, build a next.js dialog, nextjs, react, javascript

Id: fwq9vePfwkI

Length: 22min 57sec (1377 seconds)

Published: Fri Aug 11 2023