ein stück weiter - noch lange nicht fertig !

src/components/BesucherBar.jsx

@@ -1,26 +1,52 @@
-import { useState, useSyncExternalStore } from 'react'
+import { useState, useEffect } from 'react'
+import { useFormData } from '../FormContext'
 
-export default function BesucherBar({title, euro, onNext, isCompleted}) {
+export default function BesucherBar({ title, euro, onNext, isCompleted }) {
 
-const [wert, setWert] = useState('')
-const handleOK = () => {
-    if (wert) {
-        onNext()
-    } else {
-        alert('Bitte einen Wert eingeben')
+    const { formData, updateFormData } = useFormData()
+
+    // Bestimme das Feld basierend auf dem Titel
+    const fieldName = title.includes('Barspende') ? 'barspende' : 'besucherAnzahl'
+
+        // DEBUG: Zeige formData beim Laden
+    console.log('🔍 BesucherBar geladen:', title)
+    console.log('📊 Aktuelles formData:', formData)
+    console.log('🔑 Verwende Feld:', fieldName)
+    console.log('💾 Gespeicherter Wert:', formData[fieldName])
+    
+
+
+    const [wert, setWert] = useState(formData[fieldName] || '')
+
+        // DEBUG: Zeige State-Änderungen
+    useEffect(() => {
+        console.log('✏️ Wert geändert für', fieldName, ':', wert)
+    }, [wert, fieldName])
+
+
+    const handleOK = () => {
+        if (wert) {
+            updateFormData(fieldName, wert)
+
+                        console.log('✅ Gespeichert! Neues formData:', formData)
+
+
+            onNext()
+        } else {
+            alert('Bitte einen Wert eingeben')
+        }
     }
-}
 
-return(
+    return (
         <section id="besucherbar">
             <h3>{title}:</h3>
             <div className="besadiv">
-                    <input type='number' value={wert} onChange = {(e) => setWert(e.target.value)}
-                        placeholder={euro ? 'Betrag in Euro' : 'Anzahl'} disabled ={isCompleted}
-                    />
-                    &nbsp;&nbsp;{euro}
-                    <button className="okbutton" onClick={handleOK} disabled = {!wert}>OK</button>
+                <input type='number' value={wert} onChange={(e) => setWert(e.target.value)}
+                    placeholder={euro ? 'Betrag in Euro' : 'Anzahl'} disabled={isCompleted}
+                />
+                &nbsp;&nbsp;{euro}
+                <button className="okbutton" onClick={handleOK} disabled={!wert}>OK</button>
             </div>
-        </section>        
+        </section>
     )
 }