0

Creé un context para almacenar el estado de si está abierto o no un collapse de un item para mostrar los subitems. Este estado lo necesito en más lugares, por eso hice el context.

"use client"
import { createContext, useContext, useState, ReactNode } from 'react';
import PropTypes from 'prop-types';

interface SidebarContextProps {
  open: boolean;
  setOpen: (open: boolean) => void;
}

const SidebarContext = createContext<SidebarContextProps | undefined>(undefined);

export const useSidebar = () => {
  const context = useContext(SidebarContext);
  if (!context) {
    throw new Error('useSidebar debe ser usado dentro de un SidebarProvider');
  }
  return context;
};

export const SidebarProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [open, setOpen] = useState<boolean>(true);

  return (
    <SidebarContext.Provider value={{ open, setOpen }}>
      {children}
    </SidebarContext.Provider>
  );
};

SidebarProvider.propTypes = {
  children: PropTypes.node.isRequired,
};

Ese sería el context y acá lo llamo:

export const Sidebar: React.FC<{
  children: ReactNode
  title: string
}> = ({
  children,
  title
}) => {
  const {open, setOpen} = useSidebar();
  
  return (
    <aside className={`h-screen transition-all duration-200
      ${open ? "w-80" : "w-20"}`}
    >
      <nav className='h-full flex flex-col bg-bgCoal font-maven pt-[80px] overflow-hidden'>
        {more code}
      </nav>
    </aside>
  )
}
Y acá uso el provider:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <SidebarProvider>
          <Navbar />
          {children}
        </SidebarProvider>
      </body>
    </html>
  );
}

Este es el error que me sale:

Error en consola

Ya intenté varias cosas como rehacer el context, cambiar el provider, cambiar a funciones los componentes y no funciona nada.

Me serviría mucho que alguien me respondiera. Estoy con este error desde hace dos días y aún no lo resuelvo. Si necesitan ver mas código o lo que sea, diganme y se lo proveo.

5
  • El componente SideBar esta dentro de NavBar? desde donde llamas a ese componente SideBar?
    – g.4
    Commented el 19 ago. a las 2:31
  • 1
    No. El navbar se encuentra en el layout principal que envuelve mayor parte de la pagina. El sidebar se encuentra en otro layout que envuelve solo unas tres vistas. El sidebar lo llamo desde un archivo llamado SidebarLayout el cual tiene el código muy parecido al que cité arriba. Commented el 19 ago. a las 22:29
  • Parece una pregunta repetida, en esta publicación encontrarás la respuesta al error is not a function en nextjs 14 al usar un contexto, recuerda votar positivo por la publicación si te fue de ayuda, esto ayuda a mantener el sitio bien documentado.
    – g.4
    Commented el 20 ago. a las 2:22
  • 1
    This question is similar to: Error: (0 , _TestCartContext__WEBPACK_IMPORTED_MODULE_1__.useCart) is not a function. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.
    – g.4
    Commented el 20 ago. a las 2:22
  • Muchas gracias, de verdad. Mi error era algo muy simple, no sé cómo no me di cuenta. Commented el 20 ago. a las 14:56

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.