Exercise: State

by oktaviardi pratama

HTML

<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xpf1/t39.3284-6/12057049_167225730295468_1775493059_n.js"></script>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xpf1/t39.3284-6/12057127_1661385377474613_1315291641_n.js"></script>
 <div id="container"></div>

CSS

.boards { margin: 20px 0; overflow: hidden; }
.board { border: 5px solid #ccc; float: left; font: 700 24px HelveticaNeue, Helvetica, Arial; margin-right: 20px; padding: 20px; }
.board.selected { border-color: #3BA8AA; }

Babel + JSX

var Board = React.createClass({
  render: function() {
    var className = "board";
    if (this.props.selected) {
      className += " selected";
    }
    return (
      <div className={className}>
        {this.props.index + 1}
      </div>
    );
  }
});

var BoardSwitcher = React.createClass({
  getInitialState: function() {
    // Start off by selecting the first board
    return {
      selectedIndex: 0
    }
  },

  onToggleClick: function(evt) {
    // 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: function() {
    var boards = [];
    for (var ii = 0; ii < this.props.numBoards; ii++) {
      // We can compare to state here so we're no longer always selecting the first board.
      var isSelected = ii === this.state.selectedIndex;
      boards.push(
        <Board index={ii} selected={isSelected} key={ii} />
      );
    }
    
    return (
      <div>
        <div className="boards">{boards}</div>
        <button onClick={this.onToggleClick}>Toggle</button>
      </div>
    );
  }
});

React.render(
  <BoardSwitcher numBoards={3} />,
  document.body
);