JSFiddle - React, Tailwind, and code Playground

by thekenwheeler

HTML

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

JavaScript 1.7

var List = React.createClass({
    getInitialState: function(){
        return {
            todos: ["Hey","Yall"]
        }
    },
    addTodo: function(){
        var currentTodos = this.state.todos;
        currentTodos.push(this.refs.todo.getDOMNode().value);
        this.setState({
            todos: currentTodos
        });
    },
    render: function(){
    var list =  this.state.todos.map(function(todo){
        return <li>{todo}</li>
    })
        return (
            <div>
            <ul>
                {list}
            </ul>
            <input ref="todo" name="todo" type="text"/>
            <button onClick={this.addTodo}>Add Todo</button>
            </div>
        )
    }
});
 
React.render(<List/>, document.body);