SolidJS•2w ago

useContext(someContext) returns undefined if the component is inside fallback prop for <Show ... />

Is this normal behavior? Usind solid-js 1.9.3 on dev env (win10). The following renders the LoginScreen file just fine. It uses Context from Notifications.

./layout.jsx
import { Show } from "solid-js";
import { useStore } from "../ctx/store/store";
import Footer from "./footer/footer";
import Header from "./header/header";
import s from "./layout.module.scss";
import Notifications from "./notifications";
import LoginScreen from "./login/loginscreen";

export default function Layout(props) {
  const { store } = useStore();

  return (
    <>
      <LoginScreen />
      <Show when={store.user}>
        <div class={s.container}>
          <Header />
          {props.children}
          <Footer />
        </div>
      </Show>
      <Notifications />
    </>
  );
}

./layout.jsx
import { Show } from "solid-js";
import { useStore } from "../ctx/store/store";
import Footer from "./footer/footer";
import Header from "./header/header";
import s from "./layout.module.scss";
import Notifications from "./notifications";
import LoginScreen from "./login/loginscreen";

export default function Layout(props) {
  const { store } = useStore();

  return (
    <>
      <LoginScreen />
      <Show when={store.user}>
        <div class={s.container}>
          <Header />
          {props.children}
          <Footer />
        </div>
      </Show>
      <Notifications />
    </>
  );
}

But if i wan't to use the fallback prop for the Show component like:

  return (
    <>
      <Show when={store.user} fallback={LoginScreen}>
        <div class={s.container}>
          <Header />
          {props.children}
          <Footer />
        </div>
      </Show>
      <Notifications />
    </>
  );

  return (
    <>
      <Show when={store.user} fallback={LoginScreen}>
        <div class={s.container}>
          <Header />
          {props.children}
          <Footer />
        </div>
      </Show>
      <Notifications />
    </>
  );

Then the useContext() function is undefined. ( const { addError } = useNotifications() ); And the whole app should be wrapped inside the Provider already:

function App() {
  return (
    <NotificationProvider>
      <MyRouter />
    </NotificationProvider>
  );
}

render(() => <App />, document.getElementById("app"));

function App() {
  return (
    <NotificationProvider>
      <MyRouter />
    </NotificationProvider>
  );
}

render(() => <App />, document.getElementById("app"));

1 Reply

Chris P Bacon•2w ago

<Show /> 's fallback expects an JSX.Element, so you want to "call" the component instead of passing it along. I am not sure if this would fix your issue, but hopefully it helps. so turn

<Show when={store.user} fallback={LoginScreen}>

<Show when={store.user} fallback={LoginScreen}>

into

<Show when={store.user} fallback={<LoginScreen />}>

<Show when={store.user} fallback={<LoginScreen />}>

Gaming

Programming

useContext(someContext) returns undefined if the component is inside fallback prop for <Show ... />