From fba922e2dd38cda59ad9159324757f9f667157fb Mon Sep 17 00:00:00 2001
From: imaesp <127232789+imaesp@users.noreply.github.com>
Date: Wed, 11 Sep 2024 20:01:22 -0400
Subject: [PATCH 1/2] Completed Toggle Boards Ex

---
 src/components/BoardSwitcher.jsx | 12 +++++++++---
 src/main.jsx                     |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/BoardSwitcher.jsx b/src/components/BoardSwitcher.jsx
index e99793a..4891e77 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,22 @@ function Board(props) {
 }
 
 function BoardSwitcher(props) {
+  const [selectedBoard, setSelectedBoard] = useState(0); // State to track the selected board
+
+  const toggleBoard = () => {
+    setSelectedBoard((prevBoard) => (prevBoard + 1) % props.numBoards); // Toggles between boards
+  };
+
   let boards = [];
   for (let ii = 0; ii < props.numBoards; ii++) {
-    let isSelected = ii === 0;
+    let isSelected = ii === selectedBoard; // Check if current board is selected
     boards.push(<Board index={ii} selected={isSelected} key={ii} />);
   }
 
   return (
     <div>
       <div className="boards">{boards}</div>
-      <button>Toggle</button>
+      <button onClick={toggleBoard}>Toggle</button>
     </div>
   );
 }
diff --git a/src/main.jsx b/src/main.jsx
index 782f402..316ad56 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -6,6 +6,6 @@ import "./index.css";
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <BoardSwitcher numBoards={3} />
+    <BoardSwitcher numBoards={5} />
   </React.StrictMode>
 );

From 53e9fad8701ac49956c412dc3bb40262c612c25e Mon Sep 17 00:00:00 2001
From: imaesp <127232789+imaesp@users.noreply.github.com>
Date: Wed, 11 Sep 2024 21:00:41 -0400
Subject: [PATCH 2/2] Update BoardSwitcher.jsx

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

diff --git a/src/components/BoardSwitcher.jsx b/src/components/BoardSwitcher.jsx
index 4891e77..5b8b8ac 100644
--- a/src/components/BoardSwitcher.jsx
+++ b/src/components/BoardSwitcher.jsx
@@ -10,15 +10,15 @@ function Board(props) {
 }
 
 function BoardSwitcher(props) {
-  const [selectedBoard, setSelectedBoard] = useState(0); // State to track the selected board
+  const [selectedBoard, setSelectedBoard] = useState(0);
 
   const toggleBoard = () => {
-    setSelectedBoard((prevBoard) => (prevBoard + 1) % props.numBoards); // Toggles between boards
+    setSelectedBoard((prevBoard) => (prevBoard + 1) % props.numBoards); 
   };
 
   let boards = [];
   for (let ii = 0; ii < props.numBoards; ii++) {
-    let isSelected = ii === selectedBoard; // Check if current board is selected
+    let isSelected = ii === selectedBoard;
     boards.push(<Board index={ii} selected={isSelected} key={ii} />);
   }