Next.Js using Context to pass data between components and avoid props drilling
'use client' import { createContext, useContext, useState } from 'react'; export const MyContext = createContext(); export function MyProvider({children}) { const [mymessage, setMymessage] = useState(""); return ( <MyContext.Provider value={{ mymessage, setMymessage }}> {children} </MyContext.Provider> ) } export function useMy() { const context = useContext(MyContext) if (!context) { throw new Error('useTheme must be used within ThemeProvider') } return context; } |
Usage:
components/Navbar.js
const { mymessage } = useMy(); console.info(mymessage); |
page.tsx
const { setMymessage } = useMy(); setMymessage('message fror Navbar'); |