title: How to get DOM element within React component?
body: <p>I'm rendering multiple of the same component, each with their own tooltip.  Can I write code that will only look within the HTML of each component, so I'm not affecting all the other tooltips with the same class name?  I'm using stateless components.  Here is the code:</p>
  
  <p><strong>OptionsComponent.js:</strong></p>
  
  <pre><code>import React from 'react';
  
  const OptionsComponent = () =&gt; {
    const toggleTooltip = event =&gt; {
      document.getElementsByClassName('listings-table-options-tooltip').classList.toggle('tooltip-hide');
      event.stopPropagation();
    };
    return (
      &lt;div className="inline-block"&gt;
          &lt;span onClick={toggleTooltip} className="icon icon-options listings-table-options-icon"&gt; &lt;/span&gt;
          &lt;div className="tooltip listings-table-options-tooltip"&gt;
              Tooltip content
          &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>Backbone.js has something like this, allowing you to scope your document query to begin within the view element (analogous to a React component).</p>