Context eingefügt und im Komponentenbaum auf der tiefsten Ebene geändert

src/App.tsx

@@ -1,10 +1,19 @@
-import { createSignal, For, Show } from "solid-js";
+import { createContext, createSignal, For, Show } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { FooComponent } from "./Foo";
 import { NewFooComponent } from "./NewFoo";
 import { ActionComponent } from "./Action";
 import { Router, Route } from "@solidjs/router";
 
+export const MyContext = createContext();
+const Provider = (props) => {
+  const [value, setValue] = createSignal("okay, hier sind wir");
+  return (
+    <MyContext.Provider value={[value, setValue]}>
+      {props.children}
+    </MyContext.Provider>
+  )
+}
 
 const RedDiv = () => <div style="color: red">Red</div>;
 const GreenDiv = () => <div style="color: green">Green</div>;
@@ -48,6 +57,7 @@ function App() {
 
   return (
     <>
+      <Provider>
         <MyComponent />
         <select
           value={selected()}
@@ -66,6 +76,7 @@ function App() {
         <Router>
           <Route path="/" component={() => <ActionComponent />} />
         </Router>
+      </Provider>
     </>
   );
 }

src/CtxTest.tsx

@@ -0,0 +1,16 @@
+import { createSignal, useContext, createResource, Switch, Match, Show } from "solid-js"
+import { MyContext } from "./App";
+
+export function CtxTest() {
+  const [value, setValue] = useContext(MyContext);
+  setTimeout(()=>{
+    setValue("Wir haben den Context aus der Tiefe des Komponentenbaums geändert!");
+  },3000);
+  return (
+    <>
+      <h1>
+        {value}
+      </h1>
+    </>
+  )
+}

src/NewFoo.tsx

@@ -1,4 +1,6 @@
-import {createSignal, createResource, Switch, Match, Show} from "solid-js"
+import { createSignal, useContext, createResource, Switch, Match, Show } from "solid-js"
+import { MyContext } from "./App";
+import { CtxTest } from "./CtxTest";
 
 const fetchUser = async () => {
   const response = await fetch('');
@@ -12,12 +14,14 @@ const fetchUser = async () => {
 function NewFooComponent() {
   const [userId, setUserId] = createSignal();
   const [user, { mutate }] = createResource(userId, fetchUser);
+  const [value,setValue] = useContext(MyContext);
 
   setTimeout(() => {
     setUserId(5);
   }, 2000);
   return (
     <>
+      <div>--- {value}</div>
       <Show when={user.loading}>
         Loading...
       </Show>
@@ -33,6 +37,7 @@ function NewFooComponent(){
         New Foo
         <button onclick={() => mutate((user) => ["hi"])}>klick</button>
       </div>
+      <CtxTest />
     </>
   );
 }