title: React function is not a function
body: <p>Whenever I press a key and the handleKeyboardInteraction function below runs, I experience a</p>
  <p><code>TypeError: this.handleKeyboardPress is not a function</code></p>
  <p>What is the source of this? I'm not sure if using handleKeyPress as both a prop for a more deeply nested Component and as a regular function within my class is the issue. I tried introducing a brand new function that did the same functionality as handleKeyPress, but the error remained.</p>
  <pre><code>import React from &quot;react&quot;;
  import { DrumKit } from &quot;./DrumKit.js&quot;;
  import { Display } from &quot;./Display.js&quot;;
  import { Container, Row, Col } from &quot;react-bootstrap&quot;;
  import { convertCodeToKey, validKeyCodes } from &quot;./CodeToKeyConverter.js&quot;;
  
  export class DrumMachine extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        lastKeyPressed: &quot;&quot;
      };
      this.handleKeyPress = this.handleKeyPress.bind(this);
      this.handleKeyboardInteraction = this.handleKeyboardInteraction.bind(this);
    }
  
    handleKeyPress(keyPressed) {
      this.setState({
        lastKeyPressed: keyPressed
      });
    }
  
    handleKeyboardInteraction(event) {
      const keyCode = event.keyCode;
      if (validKeyCodes.includes(keyCode)) {
        let keyCurrent = convertCodeToKey(keyCode);
        this.handleKeyPress(keyCurrent);
      }
    }
  
    componentDidMount() {
      document.addEventListener(&quot;keydown&quot;, this.handleKeyboardInteraction);
    }
  
    render() {
      const lastKeyPressed = this.state.lastKeyPressed;
      return (
        &lt;Container&gt;
          &lt;Row xs={2} sm={2} md={2} lg={2}&gt;
            &lt;Col xs={10} sm={10} md={10} lg={10}&gt;
              &lt;DrumKit
                lastKeyPressed={lastKeyPressed}
                onKeyPress={this.handleKeyPress}
              /&gt;
            &lt;/Col&gt;
            &lt;Col xs={2} sm={2} md={2} lg={2}&gt;
              &lt;Display lastKeyPressed={lastKeyPressed} /&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/Container&gt;
      );
    }
  }
  </code></pre>