​

var CommentBox = React.createClass({

​

  getInitialState: function() {

    return {

      // list limit

      limit: 3,

      // state of the button

      showMore: true

    };

  },

​

  showMore: function() {

    this.setState({

      // do not show the button any more

      showMore: false, 

      // set limit to current count

      // what happens if the comments increase?

      limit: this.props.comments.length

    });

  },

​

  renderButton: function () {

    // show button only if state.showMore set to true

    if (!this.state.showMore) return null;

    return (

      <button onClick={this.showMore}>ShowMore</button>

    );

  },

​

            render: function() {

​

      // copy up to limit entries from the props.comments

      var cls = this.props.comments.slice(0,this.state.limit);

​

      return (

        <div className="commentBox">

        <ul>

          { cls.map(function (c) { return (<li key={c}>{c}</li>); }) }

        </ul>

        { this.renderButton() }

        </div>

    );

  }

​

});

​

React.render(

  <CommentBox comments={[1,2,3,4]}/>,

  document.getElementById('react_example')

);