Calculator project in React addition occurs when pressing a number after evaluating expression. Appending the number needed instead of addition

Question

I have created a calculator and I have all of the buttons working. There is 1 bug that I need help fixing. The bug occurs when I add two numbers together and then press any number key.. it adds those two numbers together instead of appending the number pressed to the sum. If it's before an evaluation of an expression, it appends just fine.

For example, when I press do 1 + 1, of course output on the calculator changes to 2. Well, if I press 2 at this point, it will add the 2 to that sum instead of appending the 2 like it is expected to.

A second example for clarification, when I press the 3 button, the + button, the 3 button, and then finally the equals button, it equals 6 on the calculator. If I then press the 1 button it changes the calculator display to 7 instead of 61.

code sandbox: https://codesandbox.io/s/github/Critter4Dinner/Calculator

here is my relevant code where the issue is happening:

import React from 'react';
import AdditionButton from './AdditionButton';
import ClearButton from './ClearButton';
import DecimalButton from './DecimalButton';
import DivisionButton from './DivisionButton';
import EightButton from './EightButton';
import EqualsButton from './EqualsButton';
import FiveButton from './FiveButton';
import FourButton from './FourButton';
import NineButton from './NineButton';
import OneButton from './OneButton';
import OutputDisplay from './OutputDisplay';
import SevenButton from './SevenButton';
import SixButton from './SixButton';
import SubtractionButton from './SubtractionButton';
import ThreeButton from './ThreeButton';
import TwoButton from './TwoButton';
import ZeroButton from './ZeroButton';
import './CalculatorBase.scss';
import MultiplicationButton from './MultiplicationButton';


class CalculatorBase extends React.Component{

    constructor(props){
        super(props)
        this.state = {
            output: 0
        }
        this.handleClick = this.handleClick.bind(this)
        this.handleClear = this.handleClear.bind(this)
        this.handleEquals = this.handleEquals.bind(this)
    }

        handleClick(currentButtonClicked){
            this.setState(prevState => {
                return {
                    output: `${prevState.output === 0 ? currentButtonClicked : prevState.output + currentButtonClicked}`
                }
            })
        }

        handleClear(){
            this.setState({output: 0})
        }

        handleEquals(){

          this.setState(prevState => {
                    return {
                        output: isNaN(prevState.output.slice(-1)) ? prevState.output : eval(prevState.output)
                    }
                })
            }



    render(){
        return (
            <main className="baseboard">
                <OutputDisplay placeThisOnScreen={this.state.output}/>
                <ClearButton handleClear={this.handleClear}/>
                <DivisionButton handleClick={this.handleClick}/>
                <SevenButton handleClick={this.handleClick}/>
                <EightButton handleClick={this.handleClick}/>
                <NineButton handleClick={this.handleClick}/>
                <MultiplicationButton handleClick={this.handleClick} />
                <FourButton handleClick={this.handleClick}/>
                <FiveButton handleClick={this.handleClick}/>
                <SixButton handleClick={this.handleClick}/>
                <AdditionButton handleClick={this.handleClick}/>
                <OneButton handleClick={this.handleClick}/>
                <TwoButton handleClick={this.handleClick}/>
                <ThreeButton handleClick={this.handleClick}/>
                <SubtractionButton handleClick={this.handleClick}/>
                <DecimalButton handleClick={this.handleClick}/>
                <ZeroButton handleClick={this.handleClick}/>
                <EqualsButton handleEquals={this.handleEquals}/>
            </main>
        )

    }
}

export default CalculatorBase;

Answer 1

The variable interpolation seems incorrect in your handleClick function.

This line:

output: `${prevState.output === 0 ? currentButtonClicked : prevState.output + currentButtonClicked}`

should be:

output: prevState.output === 0 ? currentButtonClicked : `${prevState.output}` + currentButtonClicked

Here is working sandbox based on your code.