How to open a modal through another component?
Unanswered
Masai Lion posted this in #help-forum
Masai LionOP
I have a publication page in which I use various components. I want to display a modal window with an error when a user clicks on a button in one of these components. I could do this with useState and pass the function of opening the modal window to another component. But the problem is that then I would have to use use client, and I need the page to remain server-side. I could, for example, move ErrorModal to some component and call the open state there, but I have a lot of such components. One component contains certain data and also another nested component. Theoretically I could pass a close function to each of these components, but then another problem arises. If I move the modal window from the publication page to some component below, it won't overlap some elements. For example, the same header that I have on the main page, or some other elements. Is there any way to leave my modal window with error on the main page of the publication, but call it in a completely different component and not use 'use client' on the publication page.
5 Replies
@Odorous house ant https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#modals
Masai LionOP
I need the link to stay the same
Dwarf Hotot
Yes you can perform a click event on the ssr page without using use client and then after click toggle the modal
@Dwarf Hotot Yes you can perform a click event on the ssr page without using use client and then after click toggle the modal
Masai LionOP
Sounds interesting, but not completely clear to me. Will I be able to properly perform the click event on the server page? Could you please share an example code if possible?
Dwarf Hotot
you can use a class like "clicked-btn" choose any suitable name, then the other component which is client component use below code to listen for click event
useEffect(() => {
const checkClick = document.querySelector(".clicked-btn");
checkClick.addEventListener("click", ()=>{
// write your function of closing popup
});
}, []);
then just call this use client componet in the server component . and add the class to that button on whic you want to perform the click event in the server compoent
useEffect(() => {
const checkClick = document.querySelector(".clicked-btn");
checkClick.addEventListener("click", ()=>{
// write your function of closing popup
});
}, []);
then just call this use client componet in the server component . and add the class to that button on whic you want to perform the click event in the server compoent