user629283 user629283 - 21 days ago 5
React JSX Question

React: trying to add an onClick to a li tag but the click handler function is undefined

I am new to react, so I don't know much about it.
I am trying to add a click handler to a li but the function seems to be undefined?

var ActivityList = React.createClass({
getInitialState: function() {
return {name:"test"};
},
handleClick:function(e){
console.log(e.target.name);
},
render:function(){
return (
<ul>
{this.props.data.map(function(game){
return <li onClick={this.handleClick} name={game.name}>{game.name}</li>;
})
}
</ul>);
}
});


I am wondering if it is because i have my scoping wrong here?

Answer

Set this to .map, because in .map callback this refers to global scope(in browser it is window or undefined if you use strict mode)

this.props.data.map(function(game) {
  return <li onClick={this.handleClick} name={game.name}>{game.name}</li>;
}, this);
  ^^^^^

Example