title: ReactJS listen/watch for DOM changes
body: <p>I'm having a simple Carousel in ReactJS application which runs fine. However, I'm trying to render the slide's content only if it is (hasClass) active, otherwise <code>&lt;myComponent/&gt;</code> fires three times on load.</p>
  
  <p>What is the correct way in ReactJS to listen for DOM (div) changes and listen for its class changes and when it is <code>.active</code> then render the content?</p>
  
  <p>Code:</p>
  
  <pre><code>    render() {
          return (
              &lt;div class="carousel slide carousel-fade " &gt;
                  &lt;div class="carousel-inner"  &gt;
                      &lt;div class="item active" ref="slide"&gt;
                          {/*if class is active render the content, else is null*/}
                          &lt;myComponent/&gt;
                      &lt;/div&gt;
                      &lt;div class="item" ref="slide"&gt;
                          {/*if class is active render the content, else is null*/}
                          &lt;myComponent/&gt;
                      &lt;/div&gt;
                      &lt;div class="item" ref="slide"&gt;
                          {/*if class is active render the content, else is null*/}
                          &lt;myComponent/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  </code></pre>
  
  <p>Many thanks</p>