I am brand new to React and almost everything related to it. I am still learning the MVC pattern. I am just taking the examples on the React homepage and trying to extend them, but I'm running into an error when I try to add a "onClick" to a span tag that I'm including with every todo.

Here is what I'm doing: /

And here is the offending code block:

var TodoList = React.createClass({
    markComplete: function(event){
        alert("geelo");
    },

    render: function(){
        var createItem = function(itemText, index){
            return (
                <li key={index + itemText}>
                    {itemText}<span id="markComplete" onClick={this.markComplete}>X</span>
                </li>
            );
        };
        return <ul id="list-container">{this.props.items.map(createItem)}</ul>
    }
});

Specifically I'm trying to get markComplete to fire from the following onClick={this.markComplete}

If I click on the "markComplete" span I get the following error:

Error: Invariant Violation: Expected onClick listener to be a function, instead got type object.

I can not find a solution on my own, and I've been struggling for awhile and I was hoping someone could point me in the right direction. I would be very grateful! Thank you so much!

I am brand new to React and almost everything related to it. I am still learning the MVC pattern. I am just taking the examples on the React homepage and trying to extend them, but I'm running into an error when I try to add a "onClick" to a span tag that I'm including with every todo.

Here is what I'm doing: https://jsfiddle/69z2wepo/11884/

And here is the offending code block:

var TodoList = React.createClass({
    markComplete: function(event){
        alert("geelo");
    },

    render: function(){
        var createItem = function(itemText, index){
            return (
                <li key={index + itemText}>
                    {itemText}<span id="markComplete" onClick={this.markComplete}>X</span>
                </li>
            );
        };
        return <ul id="list-container">{this.props.items.map(createItem)}</ul>
    }
});

Specifically I'm trying to get markComplete to fire from the following onClick={this.markComplete}

If I click on the "markComplete" span I get the following error:

Error: Invariant Violation: Expected onClick listener to be a function, instead got type object.

I can not find a solution on my own, and I've been struggling for awhile and I was hoping someone could point me in the right direction. I would be very grateful! Thank you so much!

• javascript
• reactjs

• The codepen linked, when I hit "Add ToDo" it console.logs but does not bring me somewhere I can mark plete. Is that just me? – ChadF Commented Jul 11, 2015 at 1:17
• Now it's putting nothing onto the DOM – ChadF Commented Jul 11, 2015 at 1:19
• This link: jsfiddle/69z2wepo/11885 ? – Chris Frank Commented Jul 11, 2015 at 1:20
• That one is working, I'm not getting an Error though, it's just not doing anything. Give me a moment to fiddle with it. – ChadF Commented Jul 11, 2015 at 1:22
• 1 I solved your issue for you, check out my answer. It should've worked awhile ago but I was having an issue with JSFiddle. – ChadF Commented Jul 11, 2015 at 2:20

1 Answer 1

Here is your solution code:

You have to bind this to createItem otherwise it cannot reference the markComplete function of your React class. Also, onClick is capitalized.

var TodoList = React.createClass({
    markComplete: function() {
        console.log("geelo");
        alert("ANYTHING");
    },

render: function(){ 
        var createItem = function(itemText, index){
            return (
                <li key={index + itemText}>
                    {itemText}<span id="markComplete" onClick={this.markComplete}>X</span>
                </li>
            );
        };
        return <ul id="list-container">{this.props.items.map(createItem.bind(this))}</ul>
    }
});