Next.js Discord

Discord Forum

Modal's TABS with search params

Unanswered
! nolikas posted this in #help-forum
Open in Discord
! nolikasOP
How do I display the correct tab of modal that matches the search params?

6 Replies

! nolikasOP
1. http://localhost:3000/?modal=auth&tab=signin
2. http://localhost:3000/?modal=auth&tab=signup
How do I display first tab's content when the url is tab=signin? Same with the second tab's content
Here's a part of my page.tsx:
type SearchParamProps = {
  searchParams: Record<string, string> | null | undefined;
};

export default async function IndexPage({ searchParams }: SearchParamProps) {
  const session = await getServerSession()
  const modal = searchParams?.modal
  const tab = searchParams?.tab
  console.log(session?.user)
  return (
    <div>
      {modal === 'auth' && <AuthModal />}
    </div>
  )
}
I'm also using MaterialUI (Base UI) Tabs: https://mui.com/base-ui/react-tabs/
Also my code of AuthModal.tsx:
! nolikasOP
Bump?