title: if clicked on another element remove class with react
body: <p>Currently upgrading from a jquery / php webapp to react. All is going well and I understand the concepts behind react etc. The only issue I can't find a workaround is how to dynamically add / delete a class based on where the user clicks. I need this because I have a few dropdowns which trigger when the user click it and need to be hidden if they click somewhere else.</p>
  
  <p>From:  <a href="https://stackoverflow.com/questions/39239492/give-a-class-of-selected-when-clicked-on-another-a-then-remove-the-class-if">Give a class of &quot;selected&quot; when clicked on another &lt;a&gt; then remove the class if it&#39;s the same &lt;a&gt;</a></p>
  
  <p>I've taken this example as it is simple, Jquery solution to the problem:</p>
  
  <pre><code>var h2 = $("h2 a");
  
  h2.on("click", function() {
    if ($(this).is(".selected")) {
      $(this).removeClass("selected");
    } else {
      h2.removeClass("selected")
        .filter(this).addClass("selected")
    }
  });
  </code></pre>
  
  <p><strong>How to mimic the same functionality in react (and / or redux)?</strong></p>
  
  <p>Image to further clarify
  <a href="https://i.stack.imgur.com/zZZut.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zZZut.jpg" alt="enter image description here"></a></p>