title: React Add/Remove and Toggle Class of Sidebar with background overlay
body: <p>Here my code: <a href="http://codepen.io/rafaelfndev/pen/gmqmvo" rel="nofollow noreferrer">http://codepen.io/rafaelfndev/pen/gmqmvo</a></p>
  
  <p>I need to add class:</p>
  
  <p><code>.overflow</code> to <code>body</code></p>
  
  <p><code>.overlay-active</code> to <code>.overlay</code></p>
  
  <p><code>.sidebar-active</code> to <code>#sidebar</code></p>
  
  <p>I need add when I click on <code>.show-sidebar</code> independent of the location of the component that has this classes. If I click on <code>.hide-sidebar</code>, I need remove this classes, and if I click on <code>.toggle-class</code> I need to toggle this classes...</p>
  
  <p>I know how to do this with jQuery, but I read somewhere that is wrong manipulate React elements with jQuery... </p>
  
  <p>I need to do exactly what this code does, but without jQuery, just using the React pattern:</p>
  
  <pre><code>$('.toggle-sidebar').click(function(){
      $('#sidebar').toggleClass('sidebar-active');
      $('body').toggleClass('overflow');
      $('overlay').toggleClass('overlay-active');
  });
  
  $('.show-sidebar').click(function(){
      $('#sidebar').addClass('sidebar-active');
      $('body').addClass('overflow');
      $('overlay').addClass('overlay-active');
  });
  
  $('.hide-sidebar, overlay').click(function(){
      $('#sidebar').removeClass('sidebar-active');
      $('body').removeClass('overflow');
      $('overlay').removeClass('overlay-active');
  });
  </code></pre>