tosiguru
tosiguru
PostsComments
SSolidJS
Created by tosiguru on 11/7/2024 in #support
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"));
2 replies