JSFiddle - React, Tailwind, and code Playground

by Chace

HTML

<div id="chatRoot"></div>

<script src="https://fb.me/react-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js">

Babel + JSX

var ChatBox = React.createClass({
  getInitialState: function() {
    return {
      chatID: 0
    };
  },
  renderChat: function() {
    var newID = this.state.chatID++;
    this.setState({
      chatID: newID
    });
  },
  render: function() {
    this.renderChat;
    console.log(this.state.chatID);
    return <div id = "chat{
    this.state.chatID
  }
  " class="
  chatbox ">Chatbox {
  this.state.chatID.toString()
}! < /div>;
}
});

var Container = React.createClass({
  getInitialState: function() {
    return {
      chatboxes: []
    };
  },
  renderChatbox: function() {
    var cbs = this.state.chatboxes;
    cbs.push( < ChatBox / > );
    this.setState({
      chatboxes: cbs
    });
  },
  render: function() {
    return <div > Hello, do you want to open a chatbox < a onClick = {
        this.renderChatbox
      } > click here < /a> {
    this.state.chatboxes
  } < /div>;
}
});

ReactDOM.render( < Container name = "World" / > , document.getElementById("chatRoot"));