React Components not responding to onClick()

Although my page renders as I expect, it appears as though the calculator 'buttons' are not responding to onClick events by calling the appropriate functions. Inspecting the page with Chrome Dev Tools shows that event listeners are not binding to the component as I would expect.

import React from 'react'

class CalcButton extends React.Component {
  // propTypes: {
  //   handler: React.propTypes.func.isRequired,
  //   label: React.propTypes.string.isRequired
  // }
  render() {
    return (
      <button 
        style={this.props.look}
        onClick={() => {this.props.handler(this.props.label)}}>
       {this.props.label}
      </button>
    )
  }
}

class Calculator extends React.Component {
  constructor(props) {
    super(props)
    this.state = {calcWindow: "This should be working"}
    this.enterClicked = this.enterClicked.bind(this)
    this.clearClicked = this.clearClicked.bind(this)
    this.modifyEquation = this.modifyEquation.bind(this)
  }

  enterClicked() {
    console.log("Enter Clicked")
  }

  clearClicked() {
    console.log("Clear Clicked")
    this.setState({
      calcWindow: ""
    })
  }

  modifyEquation(token) {
    console.log("modifyEquation Clicked")
    this.setState({
      calcWindow: this.state.calcWindow.length !== 0?
                  ` ${token}`:
                  `${token}`
    })
  }

  render() {
    const background = {
      backgroundColor: "white",
      height: "100%",

      justifyContent: "center",
      alignItems: "center",
      display: "flex"
    }

    const symbolButtonStyles = {
      justifyContent: "space-around",
      display: "inline-flex",

      backgroundColor: "blue",
      textAlign: "center",
      color: "white",

      height: "24%",
      width: "24%",
      border: "1%"
    }

    const buttons = {
      tokens: [
        '(',')','^','*', 
        '7','8','9','/', 
        '4','5','6','-', 
        '1','2','3','+', 
        '0'
      ],
      clearButton: "C",
      terminalButton: "Enter"
    }

    const terminalButtonStyle = Object.assign({}, symbolButtonStyles, {
      backgroundColor: "grey",
      width: "40%"
    })

    const calculatorShape = {
      backgroundColor: "red",
      flexWrap: "wrap",
      display: "flex",
      height: "80%",
      width: "60%"
    }

    const viewingWindow = {
      backgroundColor: "green",
      height: "20%",
      width: "100%"
    }

    const buttonWindow = {
      height: "80%",
      width: "100%"
    }

    return (
      <div style={background}>
        <div style={calculatorShape}>
          <div style={viewingWindow}>
            {this.state.calcWindow}
          </div>
          <div style={buttonWindow}>
            {buttons.tokens.map((label) => { return (
              <CalcButton key={label} 
                label={label}
                handler={this.modifyEquation}
                look={symbolButtonStyles}/> 
            )})}
            <CalcButton look={symbolButtonStyles} 
                    handler={this.clearClicked}
                    label={buttons.clearButton}/> 
            <CalcButton look={terminalButtonStyle} 
                    handler={this.enterClicked}
                    label={buttons.terminalButton}/> 
          </div>
        </div>
      </div>
    );
  }
}