I am trying to pass props from Dashboard to Header (Header in in the Layout), It works in dashboard, I can import it and get setUsers by destructuring assingment, but in Header, I cant do this for some reason
Layout.tsx:
import { UserProvider } from "@/context/UserContext";
import type { Metadata } from "next";
import { Montserrat } from "next/font/google";
import '../globals.css'
import Header from "./header/Header";
const monoton = Montserrat({subsets: ['latin']});
export const metadata: Metadata = {
title: "Home",
description: "Shared Drive project",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<UserProvider>
<html lang="en" data-theme="light">
<body className={monoton.className}>
<Header />
<main>
{children}
</main>
</body>
</html>
</UserProvider>
);
}
Dashboard.tsx:
'use client'
import React, { useEffect, useState } from 'react';
import { useUser } from '@/context/UserContext';
const Dashboard = () => {
const { setUser } = useUser();
useEffect(() => {
const fetchUserData = async () => {
console.log('dada')
const response = await fetch('http://localhost:2525/api/user', { credentials: 'include' });
if (response.ok) {
const data = await response.json();
setUser(data);
}
};
fetchUserData();
}, []);
return (
<div>
Dashboard
</div>
);
};
export default Dashboard;
UserContext.tsx:
'use client'
import React, { createContext, useContext, useState, ReactNode } from 'react';
export type UserType = {
name: string;
id: string;
role: string;
email: string;
password: string;
};
export type UserContextType = {
user: UserType | null;
setUser: React.Dispatch<React.SetStateAction<UserType | null>>;
};
const UserContext = createContext<UserContextType>({
user: null,
setUser: (user) => {user= user},
});
export const useUser = () => useContext(UserContext);
export const UserProvider = ({ children }: { children: ReactNode }) => {
const [user, setUser] = useState<UserType | null>(null);
return (
<UserContext.Provider value={{ user, setUser }}>
{children}
</UserContext.Provider>
);
};
[enter image description here](https://i.stack.imgur.com/k2wFQ.png)
I dont understand why it keep saying this is not function