SolidJSS
SolidJS•10mo ago•
23 replies
Ho-kage

Passing a component as a context value

I want to implement a dynamic sidebar which can show different content based on where you are in the component hierarchy. To achieve this I was trying to use the context API to supply the sidebar content. My goal was that descendants could either provide their own sidebar content or use one defined higher up in the hierarchy.

import { RouteSectionProps } from "@solidjs/router";
import { SidebarNavProvider } from "~/lib/shell";

function SidebarNav() {
  return (
    <div>
      <div>Dashboard</div>
      <div>Modules</div>
      <div>Profile</div>
    </div>
  );
}

export default function HomeLayout(props: RouteSectionProps) {
  return (
    <SidebarNavProvider sidebarNav={<SidebarNav />}>
      {props.children}
    </SidebarNavProvider>
  );
}


Trying something like this I keep getting hydration errors (see attached image). Is this not possible? Any alternative approaches to achieve my goal that you can think about?
image.png
Was this page helpful?