From 453924102efeedf2a72d6b1a4be1659446118bad Mon Sep 17 00:00:00 2001
From: LinxinJiang <70239443+LinxinJiang@users.noreply.github.com>
Date: Wed, 22 Sep 2021 21:56:40 -0700
Subject: [PATCH] update BoardSwitcher.js

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

diff --git a/src/BoardSwitcher.js b/src/BoardSwitcher.js
index 61ad96f..c656b3e 100644
--- a/src/BoardSwitcher.js
+++ b/src/BoardSwitcher.js
@@ -15,10 +15,35 @@ class Board extends React.Component {
 }
 
 class BoardSwitcher extends React.Component {
+
+  // set it to 0 
+  state = {
+    clicks: 0,
+  };
+
+  // increase 1 when user clicks
+  handleClick(event) {
+    this.setState({
+      clicks: this.state.clicks + 1
+    });
+  }
+
   render() {
+
     let boards = [];
     for (let ii = 0; ii < this.props.numBoards; ii++) {
-      let isSelected = ii === 0;
+
+
+      // Line 37 - 45 is new code
+      
+      // when the number is 3, clicks beack to 0
+      if(this.state.clicks === 3){
+        this.state.clicks = 0;
+      }
+
+      // let isSelected = ii === 0; the number can be 0, 1 , 2
+      let isSelected = ii === this.state.clicks;
+
       boards.push(
         <Board index={ii} selected={isSelected} key={ii} />
       );
@@ -27,7 +52,7 @@ class BoardSwitcher extends React.Component {
     return (
       <div>
         <div className="boards">{boards}</div>
-        <button>Toggle</button>
+        <button onClick={ (e) => this.handleClick(e)} >Toggle</button>
       </div>
     );
   }