ReactJS listen/watch for DOM changes

Question

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 <myComponent/> fires three times on load.

What is the correct way in ReactJS to listen for DOM (div) changes and listen for its class changes and when it is .active then render the content?

Code:

    render() {
        return (
            <div class="carousel slide carousel-fade " >
                <div class="carousel-inner"  >
                    <div class="item active" ref="slide">
                        {/*if class is active render the content, else is null*/}
                        <myComponent/>
                    </div>
                    <div class="item" ref="slide">
                        {/*if class is active render the content, else is null*/}
                        <myComponent/>
                    </div>
                    <div class="item" ref="slide">
                        {/*if class is active render the content, else is null*/}
                        <myComponent/>
                    </div>
                </div>
            </div>
        )
    }

Many thanks