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

Question

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 1

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

Answer 2

You can also use an arrow function to avoid binding this in the function at all:

this.props.data.map(game =>
    <li onClick={this.handleClick} name={game.name}>{game.name}</li>
)