From 5c33dc0b8b210213a2562ab9dccd713e08d09fe7 Mon Sep 17 00:00:00 2001
From: lenTen Nyima <lentennyima@gmail.com>
Date: Fri, 22 Sep 2023 17:57:34 -0400
Subject: [PATCH] created toggle function for 5 boards

---
 src/components/BoardSwitcher.js | 10 +++++++---
 src/index.js                    |  3 ++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/BoardSwitcher.js b/src/components/BoardSwitcher.js
index e99793a..13bba6e 100644
--- a/src/components/BoardSwitcher.js
+++ b/src/components/BoardSwitcher.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React,{useState} from "react";
 
 function Board(props) {
   let className = "board";
@@ -11,15 +11,19 @@ function Board(props) {
 
 function BoardSwitcher(props) {
   let boards = [];
+  const [currNum, setNum] = useState(0)
   for (let ii = 0; ii < props.numBoards; ii++) {
-    let isSelected = ii === 0;
+    let isSelected = ii === currNum;
     boards.push(<Board index={ii} selected={isSelected} key={ii} />);
   }
+  function clickHandler(){
+    setNum((currNum + 1) % props.numBoards);
+  }
 
   return (
     <div>
       <div className="boards">{boards}</div>
-      <button>Toggle</button>
+      <button onClick={clickHandler}>Toggle</button>
     </div>
   );
 }
diff --git a/src/index.js b/src/index.js
index 782f402..144f9af 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,8 +4,9 @@ import BoardSwitcher from "./components/BoardSwitcher";
 import "./index.css";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
+const totalBoards = 5;
 root.render(
   <React.StrictMode>
-    <BoardSwitcher numBoards={3} />
+    <BoardSwitcher numBoards={totalBoards} />
   </React.StrictMode>
 );