stopOnHover not working correctly?

Been troubleshooting the use of stopOnHover within my solution. First time I’ve decided to setup the use of autoPlay within the Carousel. Upon setting autoPlay, when I hover over the component, the autoPlay is not being stopped. stopOnHover by default is set to true and I also manually added the property to the component.

After some digging, the carouselWrapper value is undefined below so the addEventListeners are not being properly added within the setupAutoPlay.

key: 'setupAutoPlay',
      value: function setupAutoPlay() {
          this.autoPlay();
          var carouselWrapper = this.refs['carouselWrapper'];

          if (this.props.stopOnHover && carouselWrapper) {
              carouselWrapper.addEventListener('mouseenter', this.stopOnHover);
              carouselWrapper.addEventListener('mouseleave', this.startOnLeave);
          }
      }

Not quite sure why this is happening, even setting everything back to 100% default without my customizations to the CSS is still not working.

Any thoughts or something silly I’m completely forgetting…?

[Cyan005]

And… switching from using the state object to passing in as a prop resolves this issue. I can get away with using this scenario for what I need. However, if anyone in the future needed to use the state to follow this same pattern, this issue may pop back up again.

Updating from this.state.newsBannerItems to this.props.newsBannerItems resolves this.

Works:

<Carousel showArrows={true} showThumbs={true} showStatus={false} interval={1000} autoPlay={true} infiniteLoop={true}>  
        { 
         this.props.newsBannerItems.map((item, key) => {
            return (  
              <div className='newsBannerItem' key={key}><img src={item.BannerImage.Url} />
                <p className='legend'>{item.Title}... <a href={this.buildNewsLink(item)}>Read More</a></p>
              </div>
            ); 
          })  
        }
      </Carousel>

[thewashingtonhua]

I’m experiencing same problem here. My work around still uses this.state.newsBannerItems. but put an empty <div> as placeholder if its length is 0.