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 { 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,24 +57,26 @@ function App() {
 
   return (
     <>
-      <MyComponent />
+      <Provider>
-      <select
+        <MyComponent />
-        value={selected()}
+        <select
-        onInput={(e) => setSelected(e.currentTarget.value)}
+          value={selected()}
-      >
+          onInput={(e) => setSelected(e.currentTarget.value)}
-        <For each={Object.keys(options)}>
+        >
-          {(color) => <option value={color}>{color}</option>}
+          <For each={Object.keys(options)}>
-        </For>
+            {(color) => <option value={color}>{color}</option>}
-      </select>
+          </For>
-      <Dynamic component={options[selected()]} />
+        </select>
-      <FooComponent text="props test"/>
+        <Dynamic component={options[selected()]} />
-      <div class="m-12 items-center justify-center^ flex  shadow-lg bg-twitter-blue text-center">
+        <FooComponent text="props test" />
-        blue background
+        <div class="m-12 items-center justify-center^ flex  shadow-lg bg-twitter-blue text-center">
-      </div>
+          blue background
-      <NewFooComponent/>
+        </div>
-      <Router>
+        <NewFooComponent />
-              <Route path="/" component={() => <ActionComponent/>} />
+        <Router>
-      </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,40 +1,45 @@
-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('');
+  const response = await fetch('');
-    return new Promise((resolve) => {
+  return new Promise((resolve) => {
-        setTimeout(() => {
+    setTimeout(() => {
-            resolve(["abc", "def", "ghi"]);
+      resolve(["abc", "def", "ghi"]);
-        }, 3000); // 2 Sekunden Delay
+    }, 3000); // 2 Sekunden Delay
-    });
+  });
 }
 
-function NewFooComponent(){
+function NewFooComponent() {
-    const [userId, setUserId] = createSignal();
+  const [userId, setUserId] = createSignal();
-    const [user, { mutate }] = createResource(userId, fetchUser);  
+  const [user, { mutate }] = createResource(userId, fetchUser);
+  const [value,setValue] = useContext(MyContext);
 
-    setTimeout(()=>{
+  setTimeout(() => {
-        setUserId(5);
+    setUserId(5);
-    },2000);
+  }, 2000);
-    return (
+  return (
-        <>
+    <>
-            <Show when={user.loading}>
+      <div>--- {value}</div>
-                Loading...
+      <Show when={user.loading}>
-            </Show>
+        Loading...
-            <Switch>
+      </Show>
-                <Match when={user.error}>
+      <Switch>
-                    <span>Error: {user.error}</span>
+        <Match when={user.error}>
-                </Match>
+          <span>Error: {user.error}</span>
-                <Match when={user()}>
+        </Match>
-                    <div>{JSON.stringify(user())}</div>
+        <Match when={user()}>
-                </Match>
+          <div>{JSON.stringify(user())}</div>
-            </Switch>
+        </Match>
-            <div class="md (768px) justify-center bg-amber-100 py-7 justify-center text-center">
+      </Switch>
-                New Foo
+      <div class="md (768px) justify-center bg-amber-100 py-7 justify-center text-center">
-                <button onclick={()=>mutate((user) => ["hi"])}>klick</button>
+        New Foo
-            </div>
+        <button onclick={() => mutate((user) => ["hi"])}>klick</button>
-        </>
+      </div>
-    );
+      <CtxTest />
+    </>
+  );
 }
 
-export{ NewFooComponent }
+export { NewFooComponent }