using <Context.provider> in layout.jsx throwing error
Answered
Mandarin fish posted this in #help-forum
Mandarin fishOP
Can anyone help why I have an error in next.js when I use context <Context.Provider> in layout.jsx?
Here is the error and the layout.jsx code:
Here is the error and the layout.jsx code:
75 Replies
@Mandarin fish Can anyone help why I have an error in next.js when I use context <Context.Provider> in layout.jsx?
Here is the error and the layout.jsx code:
have you exported it on components/common/context?
could you show the code in components/common/context?
@Ray could you show the code in components/common/context?
Mandarin fishOP
Britannia Petite
Layout is by default server side, and context can only be client side
@Britannia Petite Layout is by default server side, and context can only be client side
Mandarin fishOP
but when I tried to add "use client" in layout I got a bunch of errors
Britannia Petite
Just create a component Providers which accept children as props
@Britannia Petite Just create a component Providers which accept children as props
Mandarin fishOP
like this?
Britannia Petite
I mean :
// main layout
...
return (
<html >
<body>
<Providers>
{children}
</Providers>
</body>
</htlm>
...
)//Providers
'use client';
export default function Providers({children}) {
return (
<YourContext.Provider>
{children}
</YourContext.Provider>
)
}@Britannia Petite I mean :
js
// main layout
...
return (
<html >
<body>
<Providers>
{children}
</Providers>
</body>
</htlm>
...
)
js
//Providers
'use client';
export default function Providers({children}) {
return (
<YourContext.Provider>
{children}
</YourContext.Provider>
)
}
Mandarin fishOP
did i made it right?
@Mandarin fish did i made it right?
you can't put state here
@Mandarin fish like this?
set it here
inside Contextelem
Britannia Petite
you can't have state inside server component
and I would wrap AppSettings and the main tag
Britannia Petite
What do you want to achieve here ?
@Ray set it here
Mandarin fishOP
but I need to transfer the var from the header to the context
Britannia Petite
as I told you, wrap your context inside a <Providers></Providers> component
@Britannia Petite What do you want to achieve here ?
Mandarin fishOP
pass a variable from the header to other components
@Mandarin fish but I need to transfer the var from the header to the context
I think you could use the context in Header and set it?
Britannia Petite
and do what ever you want to do (state, effect etc.) INSIDE your <Providers> component
@Ray I think you could use the context in Header and set it?
Mandarin fishOP
how?
const { setSelected } = useContext(LevelContext)
@Ray const { setSelected } = useContext(LevelContext)
Mandarin fishOP
@Mandarin fish Click to see attachment
you need to pass it to provider
export const LevelContext = createContext(null);
export default function Contextelem({ childrem }) {
const [selected, setSelected] = useState(0);
return (
<LevelContext.Provider
value={{ selected, setSelectedContext: setSelected }}
>
{children}
</LevelContext.Provider>
);
}@Mandarin fish Click to see attachment
could you show the code again
@Ray could you show the code again
Mandarin fishOP
here's the context code
@Mandarin fish here's the context code
and the layout.jsx
Mandarin fishOP
@Mandarin fish Click to see attachment
where do you use the context other than header?
useContext(LevelContext)
@Ray where do you use the context other than header?
Mandarin fishOP
nowhere
I think you have something like this?
const selected = useContext(LevelContext)
return (
{selected}
)@Mandarin fish Click to see attachment
can you show the full error
Mandarin fishOP
@Mandarin fish Click to see attachment
search for
useContext(LevelContext) in your editor@Ray search for `useContext(LevelContext)` in your editor
Mandarin fishOP
@Mandarin fish Click to see attachment
do you have error if you remove that line?
@Ray do you have error if you remove that line?
Mandarin fishOP
yes
@Mandarin fish yes
try passing 0 to the value in provider
Mandarin fishOP
this error because value is array
in context
array?
Mandarin fishOP
in context, the value parameter is array
@Mandarin fish this error because value is array
isn't it an object?
Mandarin fishOP
I forget what it's called
export const LevelContext = createContext(null);
@Ray try again with this code
Mandarin fishOP
this error again
@Mandarin fish this error again
no error if you do
value={{ selected }}?@Ray no error if you do `value={{ selected }}`?
Mandarin fishOP
yes seems like you have somewhere is using the context and rendering the value
is your code on github?
@Ray is your code on github?
Mandarin fishOP
no
my friend fixed error
@Mandarin fish my friend fixed error
oh what is it?
@Ray oh what is it?
Mandarin fishOP
he said he was rendering context somewhere
yes
Mandarin fishOP
No errors, but now I can't assign a value to a context
@Mandarin fish Click to see attachment
from header?
Mandarin fishOP
yes
@Mandarin fish yes
where is the value coming from in header?
Mandarin fishOP
selected var?
I think you could do this
const { selected, setSelectedContext } = useContext(levelContext)Mandarin fishOP
it's finally working!
Thank you so much, man
🤑
np
Answer