TodoList

app.jsx 1

var TodoItem=React.createClass({
	render:function(){
		return (<li className="list-group-item "> <div className="row"><div className="col-xs-8">{this.props.pos} {this.props.title}</div><div className="col-xs-2"> <button type="button" className="btn btn-danger " onClick={this.deleteMe} >X Delete</button></div></div></li>);
 	},
 	deleteMe:function(){
 		console.log("Delete");
 	}
})

var TodoList=React.createClass({
	getInitialState:function(){
		return {items:[{title:"Get Up"},{title:"Brush teeth"},{title:"Seriously, get up"}]}
	},
	addItem:function(todo){
		this.state.items.push({title:todo});
		this.forceUpdate();
	},
	render:function(){
		return (
			<div className="todlist">
				<TodoForm addHandler={this.addItem} />

				<ul className="list-group">
				
					{this.state.items.map(function(item,index){
						return (<TodoItem  pos={index} title={item.title}></TodoItem>)
					})}	
				</ul>
			</div>
			)
	}
})
var TodoForm=React.createClass({
	getInitialState:function(){
		return {todo:""}
	},
	render:function(){
		return (
			<form className="form ">
				<div className="control-group row">
					<div className="col-xs-10"><input className="form-control" value={this.state.todo} onChange={this.changeMe} /></div>
					<button  type="button" className="btn btn-primary col-sm-2 col-xs-2" onClick={this.pushedMyButton}>Add Me!</button>
				</div>
				<div className="todo">{this.state.todo}</div>
			</form>
			)
	},
	changeMe:function(e){
		this.setState({todo:e.target.value})
	},
	pushedMyButton:function(){
		if(this.state.todo==""){
			alert("Please Enter Something")
		}
		else{
			this.props.addHandler(this.state.todo);
			this.setState({todo:""});
		}
	}
});

ReactDOM.render(<TodoList></TodoList>, document.getElementById("app"))