var TodoList = React.createClass({
removeitem(){
this.props.removeitem(this.props.id)
},
render(){
var listitem = this.props.listdata
var eachitem = []
listitem.forEach((item) => {
eachitem.push(<TodoItem key={item.id} id={item.id} task={item.task} removeitem={this.props.removeitem}>{item.task}</TodoItem>)
})
return <div className="col-md-12">
<h1>To do :</h1>
<ul className="list-group">
{eachitem}
</ul>
</div>
}
})
var TodoItem = React.createClass({
remove(e){
e.preventDefault()
this.props.removeitem(this.props.id)
},
completed(){
this.props.completed(this.props.id)
},
render(){
return <li className="list-group-item" key={this.props.id}>{this.props.task}
<div className="pull-right">
<button className="btn-success" onClick={this.completed}>✓</button>
<button onClick={this.remove} className="btn-danger">X</button></div>
</li>
}
})
It looks like your removeItem() method is only calling itself in your TodoList component, thus there’s no actual logic going into it.