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:
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.
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.