DecemberTwenty9
DecemberTwenty9
PostsComments
SSolidJS
Created by DecemberTwenty9 on 6/7/2024 in #support
Can I get some assistance with context usage?
I'm new to all of this and I've been trying to learn and understand for about a week now. I can't seem to get the value of 10 to display in the second example. Why does this work 
import { render } from "solid-js/web";
import {
  createContext,
  useContext,
  type ParentProps,
} from "solid-js";

const ParentContext = createContext();

function Parent(props: ParentProps) {
  return (
    <>
      {`Parent: `}
      <ParentContext.Provider value={0}>
        {props.children}
      </ParentContext.Provider>
    </>
  );
}

function App() {
  const value = useContext(ParentContext);
  return <>{value}</>;
}

render(
  () => (
    <Parent>
      <App />
    </Parent>
  ),
  document.getElementById("app")!,
);
import { render } from "solid-js/web";
import {
  createContext,
  useContext,
  type ParentProps,
} from "solid-js";

const ParentContext = createContext();

function Parent(props: ParentProps) {
  return (
    <>
      {`Parent: `}
      <ParentContext.Provider value={0}>
        {props.children}
      </ParentContext.Provider>
    </>
  );
}

function App() {
  const value = useContext(ParentContext);
  return <>{value}</>;
}

render(
  () => (
    <Parent>
      <App />
    </Parent>
  ),
  document.getElementById("app")!,
);
But this one doesn't? 
import { render } from "solid-js/web";
import { createContext, useContext, type ParentProps } from "solid-js";

const ParentContext = createContext();

function Parent(props: ParentProps) {
  return (
    <>
      {`Parent: `}
      <ParentContext.Provider value={10}>
        {props.children}
      </ParentContext.Provider>
    </>
  );
}

function App() {
  const value = useContext(ParentContext);
  return (
    <>
      <Parent>{value}</Parent>
    </>
  );
}

render(() => <App />, document.getElementById("app")!);
import { render } from "solid-js/web";
import { createContext, useContext, type ParentProps } from "solid-js";

const ParentContext = createContext();

function Parent(props: ParentProps) {
  return (
    <>
      {`Parent: `}
      <ParentContext.Provider value={10}>
        {props.children}
      </ParentContext.Provider>
    </>
  );
}

function App() {
  const value = useContext(ParentContext);
  return (
    <>
      <Parent>{value}</Parent>
    </>
  );
}

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