ReactJS can't access “this” methods

Question

I am trying to pass a method to a child component to handle onclick events. I saw a lot of examples online, but I can\'t get it working. When I am inside the render function

Answer 1

If you're using a compiler like Babel as part of your development workflow, I'd suggest using arrow functions:

var thumbsNodes = this.state.data.map((thumb) => {
  console.log(this.handleClick);
  return ;
});

As you can see, it's a nice compact syntax. The arrow function will preserve the this context for you. The Babel compiler produces JavaScript that uses a closure:

var thumbsNodes = this.state.data.map(function(thumb) {
  var _this = this;
  console.log(_this.handleClick);
  return ;
});