CSS transformation ceases to function when translated to React code:

I translated this code here:

https://codepen.io/desandro/pen/LmWoWe

<div class="scene scene--card">
  <div class="card">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
  </div>
</div>
<p>Click card to flip.</p>

into a React equivalent here, but it ceases to function.

http://jsfiddle.net/95qeyhm0/

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      front: true
    }
  }

  clickHandler = () => {
    this.setState((prevState) => {
      return {front: !prevState.front};
    });
  }

  render() {
    alert('render called: ' + this.state.front)
    return (

    <div className="scene scene--card" onClick={this.clickHandler}>
      <div className={!this.state.front ? 'card' : 'is-flipped'}>
        <div className="card__face card__face--front">front</div>
        <div className="card__face card__face--back">back</div>
      </div>
    </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

I verified that the state was toggling between true and false but and used the Chrome inspector to verify that the className was being toggled as well.

However the output remains the same ( it does not flip in the React version)