From 3246bee7211404e5e651756ec0892b8d8e1db78f Mon Sep 17 00:00:00 2001
From: jonathanleibovici <55033245+jonathanleibovici@users.noreply.github.com>
Date: Mon, 20 Sep 2021 10:39:12 -0400
Subject: [PATCH] Update BoardSwitcher.js

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

diff --git a/src/BoardSwitcher.js b/src/BoardSwitcher.js
index 61ad96f..1406bd2 100644
--- a/src/BoardSwitcher.js
+++ b/src/BoardSwitcher.js
@@ -15,10 +15,29 @@ class Board extends React.Component {
 }
 
 class BoardSwitcher extends React.Component {
+
+  constructor(props) {
+
+    super(props);
+    this.state = {
+    selectedIndex: 0
+    }
+    
+  }
+
+  onToggleClick = (event) =>  {
+    // Here's the meat of the problem. Notice how we can use this.props here (and anywhere else in the component).
+    // When this is called, React updates the state and updates the UI to reflect the new render output.
+    this.setState({
+      selectedIndex: (this.state.selectedIndex + 1) % this.props.numBoards
+    })
+  
+  }
+
   render() {
     let boards = [];
     for (let ii = 0; ii < this.props.numBoards; ii++) {
-      let isSelected = ii === 0;
+      let isSelected = ii === this.state.selectedIndex;
       boards.push(
         <Board index={ii} selected={isSelected} key={ii} />
       );
@@ -27,7 +46,8 @@ class BoardSwitcher extends React.Component {
     return (
       <div>
         <div className="boards">{boards}</div>
-        <button>Toggle</button>
+        <button onClick={this.onToggleClick}>Toggle</button>
+        
       </div>
     );
   }