title: CSS transformation ceases to function when translated to React code:
body: <p>I translated this code here:</p>
  
  <p><a href="https://codepen.io/desandro/pen/LmWoWe" rel="nofollow noreferrer">https://codepen.io/desandro/pen/LmWoWe</a></p>
  
  <pre><code>&lt;div class="scene scene--card"&gt;
    &lt;div class="card"&gt;
      &lt;div class="card__face card__face--front"&gt;front&lt;/div&gt;
      &lt;div class="card__face card__face--back"&gt;back&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;p&gt;Click card to flip.&lt;/p&gt;
  </code></pre>
  
  <p>into a React equivalent here, but it ceases to function.</p>
  
  <p><a href="http://jsfiddle.net/95qeyhm0/" rel="nofollow noreferrer">http://jsfiddle.net/95qeyhm0/</a></p>
  
  <pre><code>class TodoApp extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        front: true
      }
    }
  
    clickHandler = () =&gt; {
      this.setState((prevState) =&gt; {
        return {front: !prevState.front};
      });
    }
  
    render() {
      alert('render called: ' + this.state.front)
      return (
  
      &lt;div className="scene scene--card" onClick={this.clickHandler}&gt;
        &lt;div className={!this.state.front ? 'card' : 'is-flipped'}&gt;
          &lt;div className="card__face card__face--front"&gt;front&lt;/div&gt;
          &lt;div className="card__face card__face--back"&gt;back&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      )
    }
  }
  
  ReactDOM.render(&lt;TodoApp /&gt;, document.querySelector("#app"))
  </code></pre>
  
  <p>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.</p>
  
  <p>However the output remains the same ( it does not flip in the React version)</p>