fixed settings change

src/Settings.js

@@ -1,13 +1,31 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import "./App.css";
 
+
 function Settings() {
+  const [autoComma, setAutoComma] = useState(false);
+  const [allowStart, setAllowStart] = useState(false);
+
+  useEffect(()=>{
+    let comma = JSON.parse(window.localStorage.getItem("autoMoveComma"));
+    setAutoComma(comma);
+    console.log("current auto comma state:", comma);
+
+    let start = JSON.parse(window.localStorage.getItem("allowStartOver"));
+    setAllowStart(start);
+    console.log("current allow start state:", start);
+  }, []);
+
   function handleMoveChange(newValue) {
     window.localStorage.setItem("autoMoveComma", newValue.target.checked);
+    console.log("set auto comma state:", newValue.target.checked);
+    setAutoComma(newValue.target.checked);
   }
 
   function handleStartChange(newValue) {
     window.localStorage.setItem("allowStartOver", newValue.target.checked);
+    console.log("set allow start state:", newValue.target.checked);
+    setAllowStart(newValue.target.checked);
   }
 
   return (
@@ -19,14 +37,14 @@ function Settings() {
 
         <input type="checkbox" id="autoMoveComma" name="autoMoveComma" autoFocus
           onChange={(e) => handleMoveChange(e)}
-          defaultChecked={JSON.parse(window.localStorage.getItem("autoMoveComma"))} />
+          checked={autoComma} />
         <label htmlFor="autoMoveComma">Zahlen automatisch ausrichten</label>
 
         <br/>
 
         <input type="checkbox" id="allowStartOver" name="allowStartOver"
           onChange={(e) => handleStartChange(e)}
-          defaultChecked={JSON.parse(window.localStorage.getItem("allowStartOver"))}/>
+          checked={allowStart}/>
         <label htmlFor="allowStartOver">Fehler ausbessern erlauben</label>
 
       </form>