title: How to animate toggled class with React
body: <p>I want to do some simple transition/animation using React and CSS.
  The idea is to click on image and that will toggle new section down below, I would like to make a nice transition when toggle.</p>
  <p>This is my React:</p>
  <pre><code>const [show, setShow] = useState(false);
  
   &lt;div className=&quot;box&quot; id=&quot;box&quot; onClick={() =&gt; setShow(!show)}&gt;
        &lt;img src=&quot;myImage&quot; /&gt;
   &lt;/div&gt;
  </code></pre>
  <p>And the section that toggles:</p>
  <pre><code>{show &amp;&amp; (
            &lt;div className=&quot;transform popup&quot;&gt;This text will show!&lt;/div&gt;
  )}
  </code></pre>
  <p>Toggling the div works perfectly fine, but the animation does not.</p>
  <p>CSS for animation:</p>
  <pre><code>.popup {
      height: 0px;
      width: 0px;
  }
  
  .transform {
      -webkit-transition: all 2s ease;
      -moz-transition: all 2s ease;
      -o-transition: all 2s ease;
      -ms-transition: all 2s ease;
      transition: all 2s ease;
  }
  
  .transform-active {
      background-color: #45cee0;
      height: 200px;
      width: 200px;
  }
  </code></pre>
  <p>Normally with jQuery I would use something like this</p>
  <pre><code>$(&quot;#box&quot;).click(function() {
    $('.transform').toggleClass('transform-active');
  });
  </code></pre>
  <p>How can I re-write into react friendly ?</p>