title: Cannot toggle class for button in React.js
body: <p>I want to make movement animation for <code>button</code> using class toggling just like in <a href="https://codepen.io/thetallweeks/pen/boinE" rel="nofollow">this example</a>. For some reasons my code is broken: it calls the click handler, but does not affect classes.</p>
  
  <p>There's the code (I use React, Classnames and Webpack):</p>
  
  <p>index.jsx:</p>
  
  <pre><code>import React from "react";
  import styles from "./index.css";
  import classnames from "classnames";
  
  export default class PlaylistButton extends React.Component {
    onClick() {
      alert("clicked");
      $('.transform').toggleClass('transform-active');
    }
  
    render() {
      return (
          &lt;button className = {classnames(styles.button, styles.transform)} onClick = {() =&gt; this.onClick()}&gt;label&lt;/button&gt;
      );
    }
  }
  </code></pre>
  
  <p>index.css:</p>
  
  <pre><code>.button {
    font-size: 30px;
    color: white;
    background-color: #5266ed;
    margin-bottom: 5px;
    border: none;
    width: 300px;
    height: 75px;
  }
  
  .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 {
    margin-left: -200px;
  }
  </code></pre>
  
  <p>What's the mistake?</p>