JSFiddle - React, Tailwind, and code Playground

by Ville Anttonen

HTML

<script src="http://fb.me/react-with-addons-0.9.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.9.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var Message = React.createClass({
    render : function(){
        return <p><b>{this.props.sender}</b> {this.props.message}</p>
    }
});

var Messages = React.createClass({
    render : function() {
        return (<ul>
                  {this.props.messages.map(function (msg){
                    return <li><Message sender={msg.sender} message={msg.message} /></li>
                  })}
                </ul>)
    }
});

var SendMessage = React.createClass({
    propTypes : {
      handler : React.PropTypes.func.isRequired
    },
    getInitialState : function(){
      return { sender : "",
               message : ""}
    },
    render : function(){
        return (
          <form onSubmit={this.handleSubmit}>
            <input type="text" value={this.state.sender} onChange={this.setSender} placeholder="Name" />
            <input type="text" value={this.state.message} onChange={this.setMessage} placeholder="Message" />
            {this.canSend() ? <input type="submit" value="Send"/> : null}
          </form>)
    },
    setSender : function(event){
      this.setState({
        sender : event.target.value
      });
    },
    setMessage : function(event){
     this.setState({
       message : event.target.value
     });
    },
    canSend : function(){
      return this.state.sender.length > 0 && this.state.message.length > 0
    },
    handleSubmit : function(){
        this.props.handler(this.state)
        this.setState({
           sender : "",
           message : ""
        });
        return false
    }
    
});

var MessageApp = React.createClass({
    getInitialState : function(){
       return {messages : this.props.messages}
    },
    render : function(){
        return (
                <div>
                  <SendMessage handler={this.addMessage} />
                  <Messages messages={this.state.messages} />
                </div>
               )
    },
    addMessage : function (msg){
      this.setState({
        ...