React call component's method from nested function in render method

Question

I would like to call the method updateCurrentThread onCLick, however I'm getting following error:

Uncaught TypeError: Cannot read property 'updateCurrentThread' of undefined

updateCurrentThread: function(thread) {
  this.setState({
  currentThread: thread
 }).bind(this);
},


render: function () {
  var threads = this.state.data.map(function (thread) {
    var boundClick = this.updateCurrentThread.bind(this, i);
    let time = getThreadDate(thread.timestamp);
    return (
      <div className="row thread" key={thread.threadID}>
        <ThreadParticipants onClick={boundClick} key={i} className="small-2 small-centered columns" ids={thread.participantIDs}/>
      </div>
  );
})

Answer 1

The this inside your function is scoped to the function, not the component. If you are able to use ES6 arrow functions, which are lexically scoped, then your current approach will work. Before arrow functions, people would store the component this in a variable (eg var self = this ) and then self.updateCurrentThread .