JSFiddle - React, Tailwind, and code Playground

by Dhiraj Bodicherla

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>

<body>
	<div id="todo">
	</div>
	<script type="text/jsx">
		var TodoList = React.createClass({
			clickHandle: function(index) {
                this.props.items[index].completed=!this.props.items[index].completed;
				this.props.onStatusUpdate(this.props.items);
			},
			render: function() {
			  var createItem = function(itemText, index) {
			    if(itemText.completed===this.props.completed)
					return <li key={index} onClick={this.clickHandle.bind(this,index)}>{itemText.text}</li>;
			  };
			  return <ul>{this.props.items.map(createItem, this)}</ul>;
			}
		  });
		  var TodoApp = React.createClass({
			getInitialState: function() {
			  return {items: [{"text":"1true","completed":true},{"text":"2true","completed":true},{"text":"1false","completed":false}], text: ''};
			},
			onChange: function(e) {
			  this.setState({text: e.target.value});
			},
			handleSubmit: function(e) {
			  e.preventDefault();
			  if(this.state.text!=''){
			  	  this.state.items.push({"text":this.state.text,"completed":false});
				  var nextText = '';
				  this.setState({items:this.state.items,text: nextText});
			  }
			  else{
			  	alert("Enter some text!");
			  }
			},
            update: function(items){
                this.setState({items: items});
            },
			render: function() {
			  return (
				<div>
				  <h3>TODO</h3>
				  <TodoList items={this.state.items} completed={false} onStatusUpdate={this.update}/>
				  <TodoList items={this.state.items} completed={true} onStatusUpdate={this.update}/>
				  <form onSubmit={this.handleSubmit}>
				    <input onChange={this.onChange} value={this.state.text} />
				    <button>{'Add #' + (this.state.items.length + 1)}</button>
				  </form>
				</div>
			  );
			}
		  });

		  React.render(<TodoApp />,...