ReactJS - ToDo App, Remove Items From List

I'm not sure what I am doing wrong here. ReactJS is pretty new to me, so I need some help into the right direction. What I want to achieve is when the span is clicked on a single l

Solution 1:

var TodoItems = React.createClass({
    render: function() {
      var todoEntries = this.props.entries;

      function createTasks(item) {
        return <li key={item.key}>{item.text}<span onClick={() => this.props.remove(item.key)}>X</span></li>;
      }

      var listItems = todoEntries.map(createTasks,this);
      return (
        <ul className="theList">
          {listItems}
        </ul>
      );
    }
  });

Solution 2:

change <span onClick={this.props.handleRemove(item.key) to <span onClick={this.props.remove(item.key) the props name is remove not handleRemove

and do todoEntries.map(createTasks, this); also this.props.remove.bind(this, item.key)

Solution 3:

What David said is true, but you need to do an additional thing, so I'm copying David's answer along with the fix:

change <span onClick={this.props.handleRemove(item.key) to <span onClick={this.props.remove.bind(this)(item.key) the props name is remove not handleRemove