Why do contexts do this?

[DaXcess]

So I needed to use contexts for one of my projects and using the tutorial I started working on this. However calling useContext in a child component results in undefined.

Here's how my code is laid out:
index.tsx

...

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  document.getElementById("root") as HTMLElement
);

App.tsx

...
import { DiscordProvider } from "./lib/discord/provider";
import { HomePage } from "./pages/Home";

const App: Component = () => {
  return (
    <DiscordProvider>
      <HomePage />
    </DiscordProvider>
  );
};

export default App;

provider.tsx

export const DiscordContext = createContext<ContextProps>();

export const DiscordProvider: Component = ({ children }) => {
  ...
  return (
    <DiscordContext.Provider
      value={{
        authorize,
        logout,
        state,
        token: () => token,
        userinfo,
      }}
    >
      {children}
    </DiscordContext.Provider>
  );
}

and finally
Home.tsx

...
export const HomePage: Component = () => {
  const discord = useContext(DiscordContext);

  createEffect(() => {
    console.log(discord); // test
  });

  return (
    <>
      <h1>?????</h1>
    </>
  );
};

If I try to run this code the console will log: undefined as the return value of useContext. But even stranger is the fact that if I change my App.tsx file to something like this:

...
import { DiscordProvider } from "./lib/discord/provider";
import { HomePage } from "./pages/Home";

const App: Component = () => {
  return (
    <DiscordProvider>
      {() => {
        createEffect(() => {
          console.log(useContext(DiscordContext));
        });

        return <h1>Test</h1>;
      }}
      <HomePage />
    </DiscordProvider>
  );
};

export default App;

The new code in this example actually does print out the correct values, whereas the still present HomePage component still prints out undefined. Does anybody have a clue as to why this is happening because I am lost.

[ryansolid]

The problem is probably here:

export const DiscordProvider: Component = ({ children }) => {

Destructuring children creates them outside the provider. Instead you should pass props. And access children under the provider.

export const DiscordProvider: Component = (props) => {
  ...
  return (
    <DiscordContext.Provider
      value={{
        authorize,
        logout,
        state,
        token: () => token,
        userinfo,
      }}
    >
      {props.children}
    </DiscordContext.Provider>
  );
}

[DaXcess]

That indeed does fix the issue. I keep forgetting that destructuring breaks certain aspects of solid.