From 89e9ad656dbc56b05d4a8b4805c1be3fd9d78d9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=A2=E3=83=8F=E3=83=A1=E3=83=83=E3=83=89?=
 <154572400+Mbensassi2026@users.noreply.github.com>
Date: Fri, 13 Sep 2024 21:07:06 -0400
Subject: [PATCH] Update BoardSwitcher.jsx

---
 src/components/BoardSwitcher.jsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/BoardSwitcher.jsx b/src/components/BoardSwitcher.jsx
index e99793a..2a2776a 100644
--- a/src/components/BoardSwitcher.jsx
+++ b/src/components/BoardSwitcher.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 function Board(props) {
   let className = "board";
@@ -10,16 +10,28 @@ function Board(props) {
 }
 
 function BoardSwitcher(props) {
+  // State to track the currently selected board
+  const [selectedBoard, setSelectedBoard] = useState(0);
+
+  // Event handler for the toggle button
+  const handleToggle = () => {
+    // Update the selected board (increment by 1, loop back to 0)
+    setSelectedBoard((prevSelectedBoard) =>
+      (prevSelectedBoard + 1) % props.numBoards
+    );
+  };
+
   let boards = [];
   for (let ii = 0; ii < props.numBoards; ii++) {
-    let isSelected = ii === 0;
+    let isSelected = ii === selectedBoard;
     boards.push(<Board index={ii} selected={isSelected} key={ii} />);
   }
 
   return (
     <div>
       <div className="boards">{boards}</div>
-      <button>Toggle</button>
+      {/* Toggle button with event handler */}
+      <button onClick={handleToggle}>Toggle</button>
     </div>
   );
 }