Kamilah Torres Pull Request for Friday 6:30pm Session @Jonathan Chery @Catherine Jimenez

src/components/BoardSwitcher.js

@@ -1,25 +1,29 @@
-import React from "react";
+import React, { useState } from "react";
 
 function Board(props) {
-  let className = "board";
-  if (props.selected) {
-    className += " selected";
-  }
+  const className = `board ${props.selected ? "selected" : ""}`;
 
   return <div className={className}>{props.index + 1}</div>;
 }
 
 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} />);
-  }
+  // Initialize state to track the current selection
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  // Event handler to toggle the active board
+  const handleToggleClick = () => {
+    setActiveIndex((prevIndex) => (prevIndex + 1) % props.numBoards);
+  };
+
+  // Generate the boards based on the activeIndex
+  const boards = Array.from({ length: props.numBoards }, (_, index) => (
+    <Board key={index} index={index} selected={index === activeIndex} />
+  ));
 
   return (
     <div>
       <div className="boards">{boards}</div>
-      <button>Toggle</button>
+      <button onClick={handleToggleClick}>Toggle</button>
     </div>
   );
 }

src/index.js

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