title: Why is React telling me that this.handleClick is not a function?
body: <p>I am creating a simple calculator with React, and I am trying to add an onClick function to a button. I am using the same technique used in the react tutorial with the tictactoe game, but when I click any button, I just get the following error message:</p>
  
  <pre><code>Uncaught TypeError: this.handleClick is not a function
      at onClick (index.js:71)
      at HTMLUnknownElement.callCallback (react-dom.development.js:188)
      at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
      at invokeGuardedCallback (react-dom.development.js:292)
      at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
      at executeDispatch (react-dom.development.js:389)
      at executeDispatchesInOrder (react-dom.development.js:414)
      at executeDispatchesAndRelease (react-dom.development.js:3278)
      at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
      at forEachAccumulated (react-dom.development.js:3259)
      at runEventsInBatch (react-dom.development.js:3304)
      at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
      at handleTopLevel (react-dom.development.js:3558)
      at batchedEventUpdates$1 (react-dom.development.js:21871)
      at batchedEventUpdates (react-dom.development.js:795)
      at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
      at attemptToDispatchEvent (react-dom.development.js:4267)
      at dispatchEvent (react-dom.development.js:4189)
      at unstable_runWithPriority (scheduler.development.js:653)
      at runWithPriority$1 (react-dom.development.js:11039)
      at discreteUpdates$1 (react-dom.development.js:21887)
      at discreteUpdates (react-dom.development.js:806)
      at dispatchDiscreteEvent (react-dom.development.js:4168)
  </code></pre>
  
  <p>My code is the following:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  
  class Screen extends React.Component {
    render() {
      return (
        &lt;p&gt;99+10&lt;/p&gt;
      );
    }
  }
  
  class Operators extends React.Component {
    render() {
      return (
        &lt;div&gt;
          {this.props.renderButton('+')}
          {this.props.renderButton('-')}
          {this.props.renderButton('x')}
          {this.props.renderButton('/')}
        &lt;/div&gt;
      );
    }
  }
  
  class Numbers extends React.Component {
    render() {
      return (
        &lt;div&gt;
          &lt;div className="nums-row"&gt;
            {this.props.renderButton(1)}
            {this.props.renderButton(2)}
            {this.props.renderButton(3)}
          &lt;/div&gt;
          &lt;div className="nums-row"&gt;
            {this.props.renderButton(4)}
            {this.props.renderButton(5)}
            {this.props.renderButton(6)}
          &lt;/div&gt;
          &lt;div className="nums-row"&gt;
            {this.props.renderButton(7)}
            {this.props.renderButton(8)}
            {this.props.renderButton(9)}
          &lt;/div&gt;
          &lt;div className="nums-row"&gt;
            {this.props.renderButton('.')}
            {this.props.renderButton(0)}
            {this.props.renderButton('=')}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  function CalculatorButton(props) {
    return (
      &lt;button onClick={props.onClick} &gt;
        {props.text}
      &lt;/button&gt;
    );
  }
  
  class Calculator extends React.Component {
    handleClick(text) {
      console.log(text);
    }
  
    renderButton(text) {
      return (
        &lt;CalculatorButton 
          onClick= {() =&gt; this.handleClick(text)}
          text={text}
        /&gt;
      );
    }
  
    render() {
      return (
        &lt;div className="calculator-container"&gt;
          &lt;div className="calculator"&gt;
            &lt;div className="screen"&gt;
              &lt;Screen /&gt; 
            &lt;/div&gt;
            &lt;div className="buttons"&gt;
              &lt;div className="numbers"&gt;
                &lt;Numbers renderButton={this.renderButton} /&gt;
              &lt;/div&gt;
              &lt;div className="operators"&gt;
                &lt;Operators renderButton={this.renderButton} /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(
    &lt;Calculator /&gt;,
    document.getElementById('root')
  );
  </code></pre>
  
  <p>This is a picture of the interface, so that it may be easier to understand what I said in the beginning of the question.</p>
  
  <p><a href="https://i.stack.imgur.com/aoSlz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aoSlz.png" alt="app UI"></a></p>
  
  <p>Thank you for the help, in advance.</p>