Johnson Chen - Friday 6:30PM - 9PM Lab - Jonathan (Prof) and Catherine (TA)

README.md

@@ -13,9 +13,9 @@ To start off and understand the desired toggle effect, try changing `let isSelec
 
 ### Tasks
 
-- [ ] change the app to render 5 boards
-- [ ] add state to track current selection
-- [ ] add an event handler for the toggle button
+- [x] change the app to render 5 boards
+- [x] add state to track current selection
+- [x] add an event handler for the toggle button
 
 ### To submit
 

src/components/BoardSwitcher.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useState} from "react";
 
 function Board(props) {
   let className = "board";
@@ -10,16 +10,23 @@ function Board(props) {
 }
 
 function BoardSwitcher(props) {
+  const [currentIndex, setBoard] = useState(0);
   let boards = [];
+
+  const handleClick = (event) => {
+    setBoard((currentIndex + 1) % props.numBoards);
+  };
+
   for (let ii = 0; ii < props.numBoards; ii++) {
-    let isSelected = ii === 0;
+    let isSelected = ii === currentIndex;
+
     boards.push(<Board index={ii} selected={isSelected} key={ii} />);
   }
 
   return (
     <div>
       <div className="boards">{boards}</div>
-      <button>Toggle</button>
+      <button onClick = {handleClick}>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>
 );