From afb8ce7109376268f338cfaa5acfc98d7de8c914 Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Thu, 19 Aug 2021 13:36:17 +0100
Subject: [PATCH] Fixes #494: TimeOptions 24h clock toggle broken (#495)

---
 components/booking/TimeOptions.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/booking/TimeOptions.tsx b/components/booking/TimeOptions.tsx
index 4e29bbf1db..d3ee31ab99 100644
--- a/components/booking/TimeOptions.tsx
+++ b/components/booking/TimeOptions.tsx
@@ -19,9 +19,10 @@ const TimeOptions = (props) => {
     }
   }, [selectedTimeZone]);
 
-  useEffect(() => {
+  const handle24hClockToggle = (is24hClock: boolean) => {
+    setIs24hClock(is24hClock);
     props.onToggle24hClock(is24h(is24hClock));
-  }, [is24hClock]);
+  };
 
   return (
     selectedTimeZone !== "" && (
@@ -35,7 +36,7 @@ const TimeOptions = (props) => {
               </Switch.Label>
               <Switch
                 checked={is24hClock}
-                onChange={setIs24hClock}
+                onChange={handle24hClockToggle}
                 className={classNames(
                   is24hClock ? "bg-black" : "dark:bg-gray-600 bg-gray-200",
                   "relative inline-flex flex-shrink-0 h-5 w-8 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"