Next.js Discord

Discord Forum

layout based on condition

Unanswered
American Crocodile posted this in #help-forum
Open in Discord
American CrocodileOP
function MyApp({ Component, pageProps, props }) {
  return router.pathname.includes('/[state]') ? (
    <StateLayout footer={props.footer} nav={nav}>
      <NextNprogress
        color={DEFAULT_THEME.tertiary}
        startPosition={0.3}
        stopDelayMs={100}
        height={3}
        options={{ easing: 'ease', speed: 300, showSpinner: false }}
      />
      <GlobalStyle />
      <Component {...pageProps} />
    </StateLayout>
  ) : (
    <Layout footer={props.footer}>
      <NextNprogress
        color={DEFAULT_THEME.tertiary}
        startPosition={0.3}
        stopDelayMs={100}
        height={3}
        options={{ easing: 'ease', speed: 300, showSpinner: false }}
      />
      <GlobalStyle />
      <Component {...pageProps} />
    </Layout>
  );
}


if the condition is true StateLayout is not rendering, any reason why ?

2 Replies

Ejayz || PiggyDev
i dont think that would work try doing if else and return each dom one by one
function MyApp({ Component, pageProps, props }) {
 if(router.pathname.includes('/[state]') ){return (
    <StateLayout footer={props.footer} nav={nav}>
      <NextNprogress
        color={DEFAULT_THEME.tertiary}
        startPosition={0.3}
        stopDelayMs={100}
        height={3}
        options={{ easing: 'ease', speed: 300, showSpinner: false }}
      />
      <GlobalStyle />
      <Component {...pageProps} />
    </StateLayout>
  ) }else { return (
    <Layout footer={props.footer}>
      <NextNprogress
        color={DEFAULT_THEME.tertiary}
        startPosition={0.3}
        stopDelayMs={100}
        height={3}
        options={{ easing: 'ease', speed: 300, showSpinner: false }}
      />
      <GlobalStyle />
      <Component {...pageProps} />
    </Layout>)
  }
}