title: React: "this" is undefined inside a component function
body: <pre><code>class PlayerControls extends React.Component {
    constructor(props) {
      super(props)
  
      this.state = {
        loopActive: false,
        shuffleActive: false,
      }
    }
  
    render() {
      var shuffleClassName = this.state.toggleActive ? "player-control-icon active" : "player-control-icon"
  
      return (
        &lt;div className="player-controls"&gt;
          &lt;FontAwesome
            className="player-control-icon"
            name='refresh'
            onClick={this.onToggleLoop}
            spin={this.state.loopActive}
          /&gt;
          &lt;FontAwesome
            className={shuffleClassName}
            name='random'
            onClick={this.onToggleShuffle}
          /&gt;
        &lt;/div&gt;
      );
    }
  
    onToggleLoop(event) {
      // "this is undefined??" &lt;--- here
      this.setState({loopActive: !this.state.loopActive})
      this.props.onToggleLoop()
    }
  </code></pre>
  
  <p>I want to update <code>loopActive</code> state on toggle, but <code>this</code> object is undefined in the handler. According to the tutorial doc, I <code>this</code> should refer to the component. Am I missing something?</p>