From 2a6f6362c5dcc8ca61fcef43aa9cb3c10085330d Mon Sep 17 00:00:00 2001
From: Tasnimul Chowdhury <41757010+tasnimul2@users.noreply.github.com>
Date: Fri, 15 Oct 2021 20:22:49 -0400
Subject: [PATCH] react lab 1 complete

---
 src/BoardSwitcher.js | 32 +++++++++++++++++++++++++++++---
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/BoardSwitcher.js b/src/BoardSwitcher.js
index 61ad96f..e2645c5 100644
--- a/src/BoardSwitcher.js
+++ b/src/BoardSwitcher.js
@@ -14,11 +14,37 @@ class Board extends React.Component {
   }
 }
 
+/*
+inside of the BoardSwitcher, I made a constructor that takes in a prop and pass it into the 
+super() method, as required by react
+
+inside of the state object, I created a currentSelected key, instantiated with the value 0, to signify the 
+0th box will be highlighed when button is pressed 
+
+I then created a method / event handler  called "updateCurrentSelected()" t, and is responsible for 
+updting the state object, created in the constructor. When we setState , ie. update the state object , we increment the currentSelected by 1.
+
+
+*/
 class BoardSwitcher extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      currentSelected:0,
+    };
+  }
+
+  updateCurrentSelected(){
+    this.setState({
+      currentSelected : this.state.currentSelected +1
+    });
+  }
   render() {
     let boards = [];
-    for (let ii = 0; ii < this.props.numBoards; ii++) {
-      let isSelected = ii === 0;
+    let numberOfBoards = this.props.numBoards;
+
+    for (let ii = 0; ii < numberOfBoards; ii++) {
+      let isSelected = ii === this.state.currentSelected % numberOfBoards;
       boards.push(
         <Board index={ii} selected={isSelected} key={ii} />
       );
@@ -27,7 +53,7 @@ class BoardSwitcher extends React.Component {
     return (
       <div>
         <div className="boards">{boards}</div>
-        <button>Toggle</button>
+        <button onClick={ ()=> this.updateCurrentSelected() }>Toggle</button>
       </div>
     );
   }