CommentDemoReact.js

var CommentBox = React.createClass({
  
  getInitialState: function() {
    return {data: this.props.data, cur_comment: ''};
  },
  
  handleAdd: function(e){
     var data = this.state.data
     this.setState({ data: data.concat([this.refs.box.getDOMNode().value]) })
  },
  
  handleClear: function(e){
    this.setState({ data: [ ] })
  },
  
  handleClearLast: function(e) {
    state_data = this.state.data
    this.setState( { data: state_data.slice(0, state_data.length - 1) } )
  },
  
  onChange: function(e) {
    this.setState({cur_comment: e.target.value})
  },
  
  render: function() {
    
    comments = this.state.data.map( function(comment) {
          return  <h2>{ comment }</h2>
    })   
    
    return (
      <div className="commentBox">
        <h1> Comments </h1>
        <h2> no_of_comments : {this.state.data.length} </h2>
        { comments }
        <input type="text"  value={this.state.cur_comment} onChange={this.onChange} ref='box'/>
        <input type="button" onClick={this.handleAdd} value="add"/>
        <input type="button" onClick={this.handleClear} value="clear"/>
        <input type="button" onClick={this.handleClearLast} value="clearLastComment"/>
      </div>
    );
  }

});