SolidJS•3mo ago

Context Provider in Layout Component for nested routes in a solid start App is undefined

I have a nested route routes/user/[id] under routes/ folder, I have created a user.tsx file with following code. As per expectation the component is acting as a layout for routes/user/[id], but when I try to access the context using useContext(AppContext), the context is undefined.

    <ProjectContext.Provider value={{ state, setState }}>
      <Toolbar />
      <main class="flex flex-row text-center mx-auto text-gray-700  h-[90vh] w-full">
        {C()}
      </main>
    </ProjectContext.Provider>


//child route 
const [state, setState] = useContext(AppContext) as AppContextType;

    <ProjectContext.Provider value={{ state, setState }}>
      <Toolbar />
      <main class="flex flex-row text-center mx-auto text-gray-700  h-[90vh] w-full">
        {C()}
      </main>
    </ProjectContext.Provider>


//child route 
const [state, setState] = useContext(AppContext) as AppContextType;

4 Replies

Madaxen86•3mo ago

Try this const ctx = useContext(AppContext) useContext does not provide a tuple. And if you destructure the context you’ll loose reactivity.

mandev7724OP•3mo ago

sorry it was

const {state, setState} = useContext(AppContext) as AppContextType;

const {state, setState} = useContext(AppContext) as AppContextType;

but yeah it doesn't work even if i don't de-structure. The issue started appearing once I lifted the context provider up into the layout component. If I move the context provider into the childRoute component, it works fine for other nested children seems like the layout component is rendered on server side, I put some console.log into it and seeing them printed on the terminal.(VS Code)

Brendonovich•3mo ago

is C coming from children? children is a memo that will eagerly evaluate its contents, so the children will be produced before being wrapped in ProjectContext

mandev7724OP•3mo ago

that fixed it, thanks.

Gaming

Programming

Context Provider in Layout Component for nested routes in a solid start App is undefined