Skip to content

Instantly share code, notes, and snippets.

@slaith
Last active September 25, 2016 12:32
Show Gist options
  • Save slaith/0b09c890c394b57426f7dd3c8e8ffd0b to your computer and use it in GitHub Desktop.
Save slaith/0b09c890c394b57426f7dd3c8e8ffd0b to your computer and use it in GitHub Desktop.
TodoList
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"))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment