title: Add active class for onClick in reactjs
body: <p>I want to start a transition when I click on a div. Currently my transition happens only when using with css active. I want this transition to happen when I click on this div. How can i do that? I'm using reactjs and i think it should be done using states. But I cannot figure out how to do this.</p>
  
  <p>I have done something like this but it is not working the way i intended. I have done something similar to this when i had only <code>:active</code> class. But in this instance i have <code>:before</code> and <code>:active:before</code>.</p>
  
  <p>I want to know how to change css via states which has <code>:before</code> property.</p>
  
  <p>i found this link but was not helpful</p>
  
  <p><a href="https://stackoverflow.com/questions/38980051/reactjs-adding-active-class-to-button">ReactJs adding active class to button</a></p>
  
  <p>This is my approach</p>
  
  <pre><code>&lt;div className='vote_card_hover' style={{transform:this.state.toggle? 'translate(-50%, -50%) scale(1)':''}}&gt;
  </code></pre>
  
  <p>My code</p>
  
  <pre><code>&lt;div className='vote_card_hover'&gt;
  
       &lt;a&gt;Test&lt;/a&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>my CSS</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.vote_card_hover {
    position: absolute;
    width: 100px;
    height:100px;
    transition: .3s ease;
    background-color: 'red'
  }
  
  .vote_card_hover:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 110%;
    height: 110%;
    background: rgba(57, 161, 255, 0.5);
    transition: transform 0.5s ease;
    border-radius: 50%;
  }
  
  .vote_card_hover:active:before {
    transform: translate(-50%, -50%) scale(1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;div class='vote_card_hover'&gt;
  
                   &lt;a&gt;Test&lt;/a&gt;
  
     &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>