Opening a modal from a server component (main page)

Answered

Golden paper wasp posted this in #help-forum

Golden paper waspOP

2023-08-07T11:24:59.000Z

Hi all,

I'm a bit stuck on how to open a modal from a server component. I know the easiest way is to just paste 'use client'; on top of the page and use useState from react. Now I think it is not the best option to make your main page.tsx use client so my question is, did someone work out a fancy way to make it work?

The 'problem'
I want to open a modal on the main page. This needs a state, isOpen and setIsOpen. This is needed to handle the open and close of the modal.

The dirty workaround
What I now did is setting a param in the url (?modal=true) and look for it. With the <Link> magic I then open it the modal. With again the <Link> magic I navigate back to "/" so the modal is being closed.

<div>
     <button 
        className="rounded bg-custom-blue font-light p-2 w-full ">
        <Link href="/?modal=true">Add Data</Link>
     </button> 
      { showModal && <AddDataModal />}    
 </div>

It looks and smells fishy. Does anyone have a better option for me>?

Answered by fuma 💙 joulev

And then put your client component in the main page, everything works

View full answer

7 Replies

fuma 💙 joulev

2023-08-07T11:55:03.000Z

Why are you doing this? You can make a client component like <AddDataModalTrigger />, and just do what you used to do

You can't make pages a client component, but you can create a client component at any position or directory

Golden paper waspOP

2023-08-07T12:08:55.000Z

But when I want to have the modal on the main page that is not possible? I mean, after clicking a button show the modal. But that needs a state because otherwise the modal will always be visible.

fuma 💙 joulev

2023-08-07T12:09:41.000Z

what? You can just create another client component wrapping your modal

fuma 💙 joulev

2023-08-07T12:10:31.000Z

And then put your client component in the main page, everything works

Answer

Golden paper waspOP

2023-08-07T12:46:47.000Z

Ok, you probably think this guy is an idiot. But thanks for the comments because I fixed it now. Thanks ðŸ™‚

fuma 💙 joulev

2023-08-07T12:56:03.000Z

Don't worry, everyone is same when started to learn Next.js