SolidJSS
SolidJS•15mo ago•
1 reply
tosiguru

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


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


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"));
Was this page helpful?