Instructor: Edgardo Molina, TA: Silu

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>
     );
   }