06_react/unterricht/tag36/01_components-with-hooks/src/App.jsx

@@ -3,6 +3,9 @@ import FooterMain from './components/footers/FooterMain';
 
 import ExampleUseState from './components/examples/ExampleUseState';
 import ExampleUseReducer from './components/examples/ExampleUseReducer';
+import ThemeProvider from './components/examples/theme-switcher/ThemeProvider';
+import ExampleUseContext from './components/examples/ExampleUseContext';
+import ExampleUseId from './components/examples/ExampleUseId';
 
 function App() {
   return (
@@ -25,6 +28,23 @@ function App() {
           <hr />
           <h2>Components with hooks</h2>
           <hr />
+          <h3>Example useId</h3>
+          <ExampleUseId />
+          <ExampleUseId />
+          <ExampleUseId />
+          <hr />
+          <h3>Example useContext</h3>
+          <ThemeProvider>
+            <div>
+              <div>
+                <ExampleUseContext />
+              </div>
+            </div>
+            <ExampleUseContext />
+            <ExampleUseContext />
+            <ExampleUseContext />
+          </ThemeProvider>
+          <hr />
           <h3>Example useReducer</h3>
           <ExampleUseReducer />
           <hr />

06_react/unterricht/tag36/01_components-with-hooks/src/components/examples/ExampleUseContext.jsx

@@ -0,0 +1,18 @@
+import { useContext } from 'react';
+import ThemeContext from './theme-switcher/ThemeContext';
+
+const ExampleUseContext = (props) => {
+  // const { } = props;
+
+  const theme = useContext(ThemeContext);
+
+  return (
+    <div className={`example-use-context text-bg-${theme} p-3 my-1`}>
+      <h4>useContext</h4>
+      <p>
+        The theme of this component is: <strong>{theme}</strong>
+      </p>
+    </div>
+  );
+};
+export default ExampleUseContext;

06_react/unterricht/tag36/01_components-with-hooks/src/components/examples/ExampleUseId.jsx

@@ -0,0 +1,21 @@
+import { useId } from 'react';
+// import { v4 as uid} from 'uuid';
+const ExampleUseId = (props) => {
+  // const { } = props;
+
+  const id = useId().replaceAll(/[_r.]/g, '');
+  // const id = uid(); // von uuid  ⇨ 'b18794e8-5d0d-417c-b361-ba38e78411b4'
+
+  return (
+    <div className="example-use-id">
+      <p>
+        <strong>ID: {id}</strong>
+      </p>
+      <div className="mb-3">
+        <label htmlFor={`input-date-${id}`}>Datum:</label>
+        <input type="date" name="date" id={`input-date-${id}`} className="form-control input-date w-25" />
+      </div>
+    </div>
+  );
+};
+export default ExampleUseId;

06_react/unterricht/tag36/01_components-with-hooks/src/components/examples/theme-switcher/ThemeContext.jsx

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+export const THEME_DEFAULT_VALUE = 'light';
+
+const ThemeContext = createContext(THEME_DEFAULT_VALUE);
+// createContext -> JSX-Element mit value Attribut
+// <ThemeContext.Provider value="light">...</ThemeContext>
+export default ThemeContext;

06_react/unterricht/tag36/01_components-with-hooks/src/components/examples/theme-switcher/ThemeProvider.jsx

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+import ThemeContext, { THEME_DEFAULT_VALUE } from './ThemeContext';
+
+const ThemeProvider = (props) => {
+  const { children } = props;
+
+  console.log(ThemeContext._currentValue); // 'light' <- _currentValue beinhaltet initialWert. Soll aber in production Umgebung nicht verwendet werden, da kein offizieller Standard.
+
+  const [theme, setTheme] = useState(THEME_DEFAULT_VALUE);
+
+  const handleToggleTheme = (e) => {
+    console.log('toggle theme');
+    setTheme((prevState) => (prevState === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <ThemeContext.Provider value={theme}>
+      <button className="btn btn-dark button-theme-toggle my-2" onClick={handleToggleTheme}>
+        Toggle Theme
+      </button>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+export default ThemeProvider;