title: Add/Remove class to parent DOM element React js
body: <p>I want to add/remove class from parent DOM element while click on add/remove button like if i click on add class button then it add new class name "clicked" to parent div and remove that class when click on remove class button:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;div class="main-div"&gt;
  
    &lt;div class="second-div" id="config"&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>config.jsx</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import Main from 'Main';
  
  ReactDOM.render(
      &lt;Main/&gt;,
      document.getElementById('config')
  );
  </code></pre>
  
  <p>Main.jsx</p>
  
  <pre><code>import ReactDOM from 'react-dom'
  import React from "react";
  import createReactClass from "create-react-class";
  
  
  export default createReactClass({
      getInitialState() {
          return {
              show-main-div: false
      };
      },
  
      addClass() {
      // want to add new class on parent DOM element i.e &lt;div class="main-div"&gt;
      },
  
      render: function () {
          return (
              &lt;div&gt;
                  &lt;button className="add-class" onClick={() =&gt; {this.addClass()}}&gt;
                      Add Class
                  &lt;/button&gt;
          &lt;button className="remove-class" onClick={() =&gt; {this.removeClass()}}&gt;
                      Remove Class
                  &lt;/button&gt;
              &lt;/div&gt;
          );
      }
  });
  </code></pre>