Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-0.12.0.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
​
</body>
</html>
 
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({
  boards: [],
  toggleStateSelection: function() {
    var self = this;
    this.setState({
      selected: function(){
        if (self.state.selected + 1 < self.boards.length) {
            return self.state.selected + 1;
        } else {
            return 0;
        }
      }()
    })
  },
  getInitialState: function () {
    return {
      selected: 0
    }
  },
  render: function() {
    for (var ii = 0; ii < this.props.numBoards; ii++) {
      var isSelected = ii === this.state.selected;
      this.boards.push(
        <Board index={ii} selected={isSelected} key={ii} />
      );
    }
    
    return (
      <div>
        <div className="boards">{this.boards}</div>
        <button onClick={this.toggleStateSelection}>Toggle</button>
      </div>
    );
  }
});
​
React.render(
  <BoardSwitcher numBoards={4} />,
  document.body
);
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers