Added context for react.

2024/12/react_demo1/src/App.jsx

@@ -4,6 +4,7 @@ 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);
@@ -19,7 +20,7 @@ function App() {
     let items = [];
     for (let i = 0; i < count; i++) {
         items.push(
-          <Item key={i} pos={i} callback={setNotification} />
+            <Item key={i} pos={i} callback={setNotification}/>
         );
     }
 
@@ -28,17 +29,25 @@ function App() {
             <h3>{notification}</h3>
             <div>
                 <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 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>
             </div>
             <h1>Vite + React</h1>
             <div className="card">
+                <AppInfoCtx.Provider value="app-info-1">
                     <ul>
                         {items}
                     </ul>
+                </AppInfoCtx.Provider>
+
+                <AppInfoCtx.Provider value="app-info-2">
+                    <ul>
+                        {items}
+                    </ul>
+                </AppInfoCtx.Provider>
                 <button className={styles.item} onClick={() => setCount((count) => count + 1)}>
                     count is {count}
                 </button>

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("");