React custom handling functions

react-handles.html

<script type="text/babel">
  var Tweet = React.createClass({
    getInitialState: function() {
      return {suggestiontags: []};
    },
    componentDidMount: function() {
      this.setState({suggestiontags: [{ id: 1, text: '#React' },{ id: 2, text: '#Angular' }]});
    },
    render: function() {
      var handleTags = this.state.suggestiontags.map(function(tag){
          return (<TwitterTags twitterTags={tag}/>);
      });
      return (
        <div>
          <TwitterHeader />
          <TwitterPoster />
          {handleTags}
        </div>
      );
    }
  });
  var TwitterHeader = React.createClass({
    render: function() {
      return (
        <h2> Post your swagoo ! </h2>
      );
    }
  });
  var TwitterPoster = React.createClass({
    getInitialState: function() {
      return {tweet: []};
    },
    handleButtonClick: function(e) {
      console.log(this.state.tweet);
      //ajax call with JQuery
    },
    handleTweetChange: function(e) {
      this.setState({tweet: e.target.value});
    },
    render: function() {
      return (
        <div>
          <input type="text" placeholder="your tweet ..." onChange={this.handleTweetChange} />
          <input type="button" value="Tweet" onClick={this.handleButtonClick}/>
        </div>
      );
    }
  });
  var TwitterTags = React.createClass({
    render: function() {
      return (
        <span> <br /> <a href={ this.props.twitterTags.id }> { this.props.twitterTags.text } </a> </span>
      );
    }
  });

  var suggestionTags = [{ id: 1, text: '#React' },{ id: 2, text: '#Angular' }];

  ReactDOM.render(
    <Tweet tags={suggestionTags}/>,
    document.getElementById('content')
  );
</script>