React states

react-states.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 />
          <TweetButton />
          {handleTags}
        </div>
      );
    }
  });
  var TwitterHeader = React.createClass({
    render: function() {
      return (
        <h2> Post your swagoo ! </h2>
      );
    }
  });
  var TwitterPoster = React.createClass({
    render: function() {
      return (
        <input type="text" placeholder="your tweet ..." />
      );
    }
  });
  var TweetButton = React.createClass({
    render: function() {
      return (
        <input type="button" value="Tweet" />
      );
    }
  });
  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>