From 731d44a7264d426790bb971eec17596e995b5503 Mon Sep 17 00:00:00 2001
From: Meagan Ruan <meaganruan@meagans-mbp.lan>
Date: Mon, 27 Sep 2021 17:11:54 -0400
Subject: [PATCH] toggled board

---
 src/BoardSwitcher.js | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/BoardSwitcher.js b/src/BoardSwitcher.js
index 61ad96f..e08f851 100644
--- a/src/BoardSwitcher.js
+++ b/src/BoardSwitcher.js
@@ -15,10 +15,30 @@ class Board extends React.Component {
 }
 
 class BoardSwitcher extends React.Component {
+  //created a constructor
+  constructor(props){//error to add super(props)
+    super(props);
+    //initialized state to start at index 0
+    this.state = {
+      //selectedNum will change based on toggle
+      selectedNum: 0
+    };
+  }
+
+  //function to toggle for click
+  toToggle = () => {
+    //change state (slectedNum) for index 2 (board 3) to go to index 0 when toggled
+    this.setState({
+      selectedNum: this.state.selectedNum < 2 ? this.state.selectedNum + 1 : 0
+    });
+  }
   render() {
+     //board array for storing selected
     let boards = [];
+     //for loop for iterating through the max number of boards (3)
     for (let ii = 0; ii < this.props.numBoards; ii++) {
-      let isSelected = ii === 0;
+      //compares if index i is the 3rd index
+      let isSelected = ii === this.state.selectedNum;
       boards.push(
         <Board index={ii} selected={isSelected} key={ii} />
       );
@@ -27,7 +47,7 @@ class BoardSwitcher extends React.Component {
     return (
       <div>
         <div className="boards">{boards}</div>
-        <button>Toggle</button>
+        <button onClick={this.toToggle}>Toggle</button>
       </div>
     );
   }