Build a JavaScript Calculator (user story 9 fails) Stuck on solving the last test advice appreciated!

Tell us what’s happening:
I’m really struggling with this one. I am trying to work on step 9. 9. In any order, I should be able to add, subtract, multiply and divide a chain of numbers of any length, and when I hit “=”, the correct result should be shown in the element with the id of “display”

I’m trying to add ‘amounts’ after an operator btn has been selected to an array as a first step but I can’t seem to get that to work.

Your code so far
import React, { Component } from ‘react’
import Layout from ‘…/components/layout’
// import Image from ‘…/components/image’
import SEO from ‘…/components/seo’
import styled from ‘styled-components’

const Keypad = styled.div`
display: grid;
grid-template-columns: repeat(4, 80px);
grid-gap: 10px;
justify-content: center;
padding: 2%;

button {
font-size: 1.5rem;
height: 60px;
const Equal = styled.div
// display: grid;
// grid-template-columns: repeat(2, 160px);
// grid-gap: 30px;
// justify-content: center;
margin: auto;

#equal {
font-size: 1.5rem;
width: 210px;
height: 60px;
const CalcDisplay = styled.div
color: orange;
font-size: 1.5rem;

export default class IndexPage extends Component {
constructor(props) {

this.state = {
  amount: parseFloat(0, 10),
  operator: '',
  answer: [],

handleClear = (e) => {
amount: 0,
operator: ‘’,
answer: this.state.answer =

handleKeyPad = (e) => {

  amount:  parseFloat(this.state.amount +=, 10),



handleMath = (e, previousState) => {
let tally = this.state.answer.push(this.state.amount)
answer: ,
amount: 0

handleDecimal = (e) => {
amount: ${this.state.amount}.

doMath = (e) => {
// answer: this.state.answer.push(,
amount: 0


render() {
return (

<SEO title=“Home” keywords={[freecodecamp, application, calculator]} />

        <CalcDisplay id="display" style={{color: 'orange'}}>

          <button id="one" value="1" onClick={this.handleKeyPad}>1</button>
          <button id="two" value="2" onClick={this.handleKeyPad}>2</button>
          <button id="three" value="3" onClick={this.handleKeyPad}>3</button>
          <button id="add" value="+" onClick={this.handleMath} data-action="add" >+</button>

          <button id="four" value="4" onClick={this.handleKeyPad}>4</button>
          <button id="five" value="5" onClick={this.handleKeyPad}>5</button>
          <button id="six" value="6" onClick={this.handleKeyPad}>6</button>
          <button id="subtract" value="-" onClick={this.handleMath} data-action="subtract" >-</button>

          <button id="seven" value="7" onClick={this.handleKeyPad}>7</button>
          <button id="eight" value="8" onClick={this.handleKeyPad}>8</button>
          <button id="nine"  value="9" onClick={this.handleKeyPad}>9</button>
          <button id="multiply" value="x" onClick={this.handleMath} data-action="multiply" >x</button>

          <button id="zero" value="0" onClick={this.handleKeyPad}>0</button>
          <button id="decimal" onClick={this.handleDecimal} data-action="decimal" >.</button>
          <button id="clear" onClick={this.handleClear} data-action="clear" >AC</button>
          <button id="divide" value="÷" onClick={this.handleMath} data-action="divide" >÷</button>

        <Equal id="equals">
          <button id="equal" type="button" onClick={this.doMath}>=</button>


Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge:

My project is here:

code is here: