From 622e7928da894625ff7ff49a3ba3558ecd285847 Mon Sep 17 00:00:00 2001
From: Mujie Shen <111381442+MujiS8226@users.noreply.github.com>
Date: Thu, 24 Oct 2024 09:57:14 -0400
Subject: [PATCH 1/2] Add files via upload

---
 src/main.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 52c530bb6a1eed979ae03299d4137002eba4367c Mon Sep 17 00:00:00 2001
From: Mujie Shen <111381442+MujiS8226@users.noreply.github.com>
Date: Thu, 24 Oct 2024 09:58:23 -0400
Subject: [PATCH 2/2] Add files via upload

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

diff --git a/src/components/BoardSwitcher.jsx b/src/components/BoardSwitcher.jsx
index e99793a..c1c8403 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,24 @@ function Board(props) {
 }
 
 function BoardSwitcher(props) {
+  // add state to track current selection
+  // state variable
+  const [selectedBoardIndex, setSelectedBoardIndex] = useState(0);
+  // create an event handler
+  const handleClick = (event) => {
+    // use the getter when trying to update the setter of state variable 
+    setSelectedBoardIndex((selectedBoardIndex + 1) % props.numBoards);
+  }
   let boards = [];
-  for (let ii = 0; ii < props.numBoards; ii++) {
-    let isSelected = ii === 0;
-    boards.push(<Board index={ii} selected={isSelected} key={ii} />);
+  for (let boardIndex = 0; boardIndex < props.numBoards; boardIndex++) {
+    let isSelected = boardIndex === selectedBoardIndex;
+    boards.push(<Board index={boardIndex} selected={isSelected} key={boardIndex} />);
   }
 
   return (
     <div>
       <div className="boards">{boards}</div>
-      <button>Toggle</button>
+      <button onClick={handleClick}>Toggle</button>
     </div>
   );
 }