Jude Pierre-Friday 6pm

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) {
-  let boards = [];
-  for (let ii = 0; ii < props.numBoards; ii++) {
-    let isSelected = ii === 0;
-    boards.push(<Board index={ii} selected={isSelected} key={ii} />);
+  // const [selected, setSelected] = useState(1);
+  const [selectedBoardIndex, setSelectedBoardIndex] = useState(0);
+
+  function handleClick (){
+    setSelectedBoardIndex( (selectedBoardIndex + 1) % props.numBoards )
+
   }
 
+  let boards = [];
+  // for (let ii = 0; ii < props.numBoards; ii++) {
+  //  let isSelected = selected === ii + 1
+  //   boards.push(<Board index={ii} selected={isSelected} key={ii} />);
+
+  for (let boardIndex = 0; boardIndex < props.numBoards; boardIndex++) {
+    let isBoardSelected = selectedBoardIndex === boardIndex;
+    boards.push(<Board index={boardIndex} selected = {isBoardSelected} key={boardIndex}/>)
+  }
   return (
     <div>
       <div className="boards">{boards}</div>
-      <button>Toggle</button>
+      {/* <button onClick={()=>{setSelected(selected === boards.length? 1 : selected + 1); console.log(selected)}}>Toggle</button> */}
+      <button onClick={handleClick}>Toggle</button> 
     </div>
   );
 }

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>
 );