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>
  );
}

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?

SolidJS•12mo ago•

23 replies

Ho-kage

Passing a component as a context value

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>
  );
}

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?

Passing a component as a context value

Similar Threads

Passing a component as a context value

Similar Threads

Similar Threads

Similar Threads