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 = Reac         


        

Answer 1

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

Answer 2

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