javascript - ReactJS passing object instead of function inside onClick -

i brand new react , related it. still learning mvc pattern. taking examples on react homepage , trying extend them, i'm running error when try add "onclick" span tag i'm including every todo.

here i'm doing: https://jsfiddle.net/69z2wepo/11884/

and here 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 markcomplete fire following onclick={this.markcomplete}

if click on "markcomplete" span following error:

error: invariant violation: expected onclick listener function, instead got type object.

i can not find solution on own, , i've been struggling awhile , hoping point me in right direction. grateful! thank much!

here solution code:

you have bind this createitem otherwise cannot reference markcomplete function of react class. also, onclick 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>     } });