Using setStepNav to update app-header nav

michelcodelast year

6

  const { setStepNav } = useStepNav()

  React.useEffect(() => {
    const nav: StepNavItem[] = []

    nav.push({
      label: t('stepList:title'),
      url: '/steps',
    })

    setStepNav(nav)
  }, [setStepNav, t])

• 

  zed0547last year

  I'm thinking that your custom List view might be outside of the provider that threads this through

  
  
  

  Are other hooks working here?

  
  
  

  useLocale, useTheme, etc...?

• 

  michelcodelast year

  useAuth is working

  
  
  

  How could it be outside of the provider though?

  
  

  This is how I reference the component:

  
  

      components: {
        views: {
          list: {
            Component: '@/collections/Steps/components/step-list/StepsListComponent#StepsListComponent',
          },
        },
      },

• 

  zed0547last year

  Well, it would be outside the provider if custom list views are rendered outside the provider.

  
  
  

  If useAuth is working though, then that's not the case

  
  
  

  Here's the root provider:

  https://github.com/payloadcms/payload/blob/main/packages/ui/src/providers/Root/index.tsx#L54
  
  

  Maybe try using

  SetStepNav

  component instead?

  
  
  

  In your view and pass it a list of { label: string, url: string }

  
  
  

  I'm not sure why it's giving you trouble here tbh

• 

  michelcodelast year

  I have no clue either, but using the

  SetStepNav

  component worked!

  
  

  Thanks!

• 

  zed0547last year

  Nice

  - glad it worked for ya! My pleasure

• 

  _niccolas__last year

  @654031862146007055

  This guy had a same problem as you see