ReactJS passing object instead of function inside onClick

Question

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.net/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!

The codepen linked, when I hit "Add ToDo" it console.logs but does not bring me somewhere I can mark complete. Is that just me? — ChadF
– ChadF, Commented Jul 11, 2015 at 1:17
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
– ChadF, Commented Jul 11, 2015 at 1:22
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
– ChadF, Commented Jul 11, 2015 at 2:20

ChadF · Accepted Answer · 2015-07-11 02:19:00Z

5

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>
    }
});

edited Jul 11, 2015 at 2:19

answered Jul 11, 2015 at 1:40

ChadF

1,75810 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS passing object instead of function inside onClick

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related