On clicking remove a console error, "this.props.removeitem is not a function" occurs. plz help!

On clicking remove a console error, "this.props.removeitem is not a function" occurs. plz help!
0

#1
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}>&#x2713;</button>
          <button onClick={this.remove} className="btn-danger">X</button></div>
          </li>
          }
      })

#2

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

@RandellDawson Thanks a lot. I’m new to FCC :slight_smile:


#4

It looks like your removeItem() method is only calling itself in your TodoList component, thus there’s no actual logic going into it.