06_react/unterricht/tag38/01_react-with-forms/src/components/forms/joi/FormContact.jsx

@@ -26,6 +26,7 @@ const FormContact = (props) => {
     if (Object.keys(errors).length === 0) {
       console.log('Form submitted ....');
       // TODO: send over AJAX/Fetch
+
       form.reset();
       setFormData(INITIAL_FORM_DATA);
       setErrors({});

06_react/unterricht/tag38/02_react-api-with-hooks/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "axios": "^1.21.0",
     "bootstrap": "^5.3.8",
-    "joi": "^18.3.0",
+    "joi": "^18.3.1",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
     "react-hook-form": "^7.91.0",
@@ -25,7 +25,7 @@
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.2",
     "oxlint": "^1.90.0",
-    "sass-embedded": "^1.106.1",
+    "sass-embedded": "^1.107.0",
     "vite": "^8.3.5"
   }
 }

06_react/unterricht/tag38/02_react-api-with-hooks/src/components/examples/ExampleUseEffectMount.jsx

@@ -1,21 +1,24 @@
-import { useEffect } from 'react';
+import { useEffect, useId } from 'react';
 
 const ExampleUseEffectMount = (props) => {
   // const { } = props;
 
-  console.log(document.querySelector('#box')); // null
+  const id = useId();
+
+  console.log(document.getElementById(`box${id}`)); // null
   useEffect(() => {
     //mount
-    console.log(document.querySelector('#box')); // <div class="box"></div> // JSX Element liegt als gerendertes HTML vor.
+    console.log(document.getElementById(`box${id}`)); // <div class="box"></div> // JSX Element liegt als gerendertes HTML vor.
+    const box = document.getElementById(`box${id}`);
 
-    document.querySelector('#box').style.color = 'white';
-    document.querySelector('#box').style.backgroundColor = '#2a2a2a';
-    document.querySelector('#box').style.padding = '1rem';
+    box.style.color = 'white';
+    box.style.backgroundColor = '#2a2a2a';
+    box.style.padding = '1rem';
   }, []);
 
   return (
     <div className="example-use-effect-mount">
-      <div id="box">
+      <div id={`box${id}`}>
         <p>Box was rendered</p>
       </div>
     </div>

06_react/unterricht/tag38/02_react-api-with-hooks/src/pages/HomePage.jsx

@@ -20,6 +20,7 @@ function HomePage() {
       <hr />
       <h2>Example useEffect (mount)</h2>
       <ExampleUseEffectMount />
+      <ExampleUseEffectMount />
       <hr />
       <h2>Example useEffect (did update)</h2>
       <ExampleUseEffectDidUpdate />