Build a JavaScript Calculator - Help

I am working on my calculator, and I am stumped trying to make my operators work properly. Here is what I have so far:

class Buttons extends React.Component {

    render() {

        return(
            <div>
                <button id="clear" value="C">C</button>
                <button id="clear-entry" value="CE">CE</button>
                <button id="delete" value="DEL">⌫</button>
                <button id="divide" value="/" onClick={this.props.onOperators}>÷</button>
                <button id="seven" value="7" onClick={this.props.onNumbers}>7</button>
                <button id="eight" value="8" onClick={this.props.onNumbers}>8</button>
                <button id="nine" value="9" onClick={this.props.onNumbers}>9</button>
                <button id="multiply" value="*" onClick={this.props.onOperators}>×</button>
                <button id="four" value="4" onClick={this.props.onNumbers}>4</button>
                <button id="five" value="5" onClick={this.props.onNumbers}>5</button>
                <button id="six" value="6" onClick={this.props.onNumbers}>6</button>
                <button id="subtract" value="-" onClick={this.props.onOperators}>-</button>
                <button id="one" value="1" onClick={this.props.onNumbers}>1</button>
                <button id="two" value="2" onClick={this.props.onNumbers}>2</button>
                <button id="three" value="3" onClick={this.props.onNumbers}>3</button>
                <button id="add" value="+" onClick={this.props.onOperators}>+</button>
                <button id="zero" value="0" onClick={this.props.onNumbers}>0</button>
                <button id="decimal" value=".">.</button>
                <button id="=" value="=">=</button>
            </div>
        )
    }
}
class Calculator extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            prevValue: 0,
            currValue: 0,
            operator: null,
            input: '0',
            formula: '',
        };
        this.handleNumbers = this.handleNumbers.bind(this);
        this.handleOperators = this.handleOperators.bind(this);
    }
    handleNumbers(event) {
        if (this.state.evaluated) {
            this.setState({
                input: event.target.value,
                evaluated: false,
            })
        } else {
            this.setState({
                input: this.state.input.concat(event.target.value),
            });
        }
    }
    handleOperators(event) {
        const op = {
            '/': (a, b) => {return a / b},
            '*': (a, b) => {return a * b},
            '-': (a, b) => {return a - b},
            '+': (a, b) => {return a + b},
        };
        let answer = parseFloat(this.state.input);

        if (this.state.operator === null) {
            this.setState({
                currValue: answer,
                operator: event.target.value,
                formula: this.state.input.concat(' ' + event.target.value)
            });
        } else {
            this.setState({
                prevValue: this.state.currValue,
                formula: this.state.formula
                    .concat(' ' + this.state.input)
                    .concat(' ' + event.target.value)
            });
            this.setState({
                currValue: op[this.state.operator](this.state.prevValue, answer)
            });
            this.setState({
                input: this.state.currValue,
                operator: event.target.value,

            });
        }
        this.setState({
            evaluated: 'true'
        })
    }
    render() {
        return(
            <div id="calculator">
                <div id="display">
                    <p id="output">{this.state.formula}</p>
                    <p id="input">{this.state.input}</p>
                </div>
                <Buttons
                    onNumbers={this.handleNumbers}
                    onOperators={this.handleOperators}
                />
            </div>
        )
}
}
ReactDOM.render(
    <Calculator />,
    document.getElementById('root'));

I am trying to make it so that when an operator button is pressed, it shows the equation thus far, and the solution, as it would do on a normal digital calculator. I am having trouble getting it to show the solution.

What I really don’t understand is why when this.setState({ currValue: op[this.state.operator](this.state.prevValue, answer) }); is called in the handleOperators method, it doesn’t store the intended value.

I have tried running the code with this.setState({currValue: op[this.state.operator](3, 6)});and it works correctly, which leads me to believe that either or both this.state.prevValue and answer are not working as numbers, but I don’t understand why that is the case.

Any help in solving this would be greatly appreciated. Also I would be open to any pointers in formatting the code in general in order to make it look/run better.

Thanks!

setState is asynchronous (https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous) so in the line before, you call setState and set the prevValue, but it might not update by the time you try to use it in the next setState. The link to the docs will show you how to do this.