title: Why is React state not working with data from external class?
body: <p>I'm quite new to Javascript and React, and as a challenge for myself im trying to build a simple calculator. My plan was to break out the calculator logic into a separate class.</p>
  
  <p>I'm just testing out now, but have a very strange problem. Probably something very simple i'm not understanding.</p>
  
  <p>Just trying to add numbers in my "Calculator class" right now. And get them to show in my display.</p>
  
  <p>Here is my Calculator</p>
  
  <pre><code>class Calculator {
    constructor(prevOperand = "0", currentOperand = "0", displayValue = "0") {
      this.prevOperand = prevOperand;
      this.currentOperand = currentOperand;
      this.displayValue = displayValue;
      this.addNumber = this.addNumber;
    }
  
    addNumber(number) {
      if (this.currentOperand === "0") {
        this.currentOperand = number;
      } else {
        this.currentOperand += number;
      }
      // Show the number in caclulator, not working with hook
      console.log(this.currentOperand);
    }
  }
  
  export default Calculator;
  </code></pre>
  
  <p>And here is the start of my App</p>
  
  <pre><code>const App = (props) =&gt; {
    const calculator = new Calculator();
    const [displayValue, setDisplayValue] = useState(0);
  
    const onClick = (event) =&gt; {
      calculator.addNumber(event.target.textContent);
      setDisplayValue(calculator.currentOperand);
      event.stopPropagation();
    };
  </code></pre>
  
  <p>The strange thing is that my operandstring in my Calculator is only showing the last digit entered. However if i remove the call to setDisplayValue in my onClick handler, the  "Calculator" is adding the numbers as expected. In what way is my state hook affecting the result in my calculator?</p>