Carousel position resets when parent component's timer interval is triggered

I have a <Carousel> instance that is embedded in a parent component’s render method.

render() {
  return (
    <div>
      <Carousel>
        ...
      </Carousel>
    </div>
  )
}

The parent component’s componentDidMount() method contains a setInterval() call that runs every five seconds (for example).

componentDidMount() {
  this.myRefreshInterval = setInterval(() => { ... }, 5000)
}

The carousel’s selectedItem property is reset to zero every five seconds, when the parent component’s myRefreshInterval interval is triggered.

[lukevandekieft]

Was able to get this working, thanks for the suggestion spamforhope! For anyone trying to control carousel position in parent state here’s what I used:

Carousel:

<Carousel onChange={this.props.changeCarousel} selectedItem={this.props.carouselPosition}>

Parent Component:

  state = {
    carouselPosition: 0,
  }

  changeCarousel = index => {
    this.setState({carouselPosition: index});
  }

[spamforhope]

@tenacious-joy I’ve created logic where I store current slide Index and set it to Carousel activeSlide props every time. It works, but it’s not a solution.