Added context for react.

2024/12/react_demo1/src/App.jsx

@@ -4,10 +4,11 @@ import viteLogo from '/vite.svg'
 import './App.css'
 import styles from './App.module.scss';
 import Item from './Item.jsx';
+import AppInfoCtx from "./appInfoCtx.js";
 
 function App() {
-  const [count, setCount] = useState(0);
+    const [count, setCount] = useState(0);
-  const [notification, setNotification] = useState("");
+    const [notification, setNotification] = useState("");
 
     useEffect(() => {
         console.log("Executed on mount")
@@ -16,41 +17,49 @@ function App() {
         }
     }, []);
 
-  let items = [];
+    let items = [];
-  for (let i = 0; i < count; i++) {
+    for (let i = 0; i < count; i++) {
-      items.push(
+        items.push(
-          <Item key={i} pos={i} callback={setNotification} />
+            <Item key={i} pos={i} callback={setNotification}/>
-      );
+        );
-  }
+    }
 
     return (
         <>
             <h3>{notification}</h3>
             <div>
-        <a href="https://vite.dev" target="_blank">
+                <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
+                    <img src={viteLogo} className="logo" alt="Vite logo"/>
-        </a>
+                </a>
-        <a href="https://react.dev" target="_blank">
+                <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
+                    <img src={reactLogo} className="logo react" alt="React logo"/>
-        </a>
+                </a>
-      </div>
+            </div>
-      <h1>Vite + React</h1>
+            <h1>Vite + React</h1>
-      <div className="card">
+            <div className="card">
-        <ul>
+                <AppInfoCtx.Provider value="app-info-1">
-            {items}
+                    <ul>
-        </ul>
+                        {items}
-        <button className={styles.item} onClick={() => setCount((count) => count + 1)}>
+                    </ul>
-          count is {count}
+                </AppInfoCtx.Provider>
-        </button>
+
-        <p>
+                <AppInfoCtx.Provider value="app-info-2">
-          Edit <code>src/App.jsx</code> and save to test HMR
+                    <ul>
-        </p>
+                        {items}
-      </div>
+                    </ul>
-      <p className="read-the-docs">
+                </AppInfoCtx.Provider>
-        Click on the Vite and React logos to learn more
+                <button className={styles.item} onClick={() => setCount((count) => count + 1)}>
-      </p>
+                    count is {count}
-    </>
+                </button>
-  )
+                <p>
+                    Edit <code>src/App.jsx</code> and save to test HMR
+                </p>
+            </div>
+            <p className="read-the-docs">
+                Click on the Vite and React logos to learn more
+            </p>
+        </>
+    )
 }
 
 export default App

2024/12/react_demo1/src/Item.jsx

@@ -1,9 +1,11 @@
 import "bulma";
-import {useState} from "react";
+import {useContext, useState} from "react";
 import styles from './Item.module.css';
+import appInfoCtx from "./appInfoCtx.js";
 
 export default function Item({pos, callback}) {
     let [loading, setLoading] = useState(false);
+    const appInfo = useContext(appInfoCtx);
     return (<li className={'my-4 ' + styles.item}>
         <div>
             <div style={{"display": "inline-block"}} className="box m-4"><span>Item {pos}</span></div>
@@ -13,9 +15,10 @@ export default function Item({pos, callback}) {
                     callback('Clicked ' + pos);
                     setLoading(false);
                 }, 1000)
-            }}>Click me
+            }}>Click me test 1 + 2 + 3
             </button>
             <button className="delete"/>
+            <span>App info: {appInfo}</span>
         </div>
     </li>);
 }

2024/12/react_demo1/src/appInfoCtx.js

@@ -0,0 +1,3 @@
+import {createContext} from "react";
+
+export default createContext("");