React-bootstrap: carousel doesn't autoplay

[ckiss]

this is the render function of my Carousel component:

render () {
    const {scenarios} = this.props
    return (
      <Carousel activeIndex={this.state.index}
                direction={this.state.direction}
                onSelect={this.handleSelect}
                indicators={this.state.indicators}
                interval={this.state.interval}
                slide={this.state.slide}
                wrap={this.state.wrap}
                pauseOnHover={this.state.pauseOnHover}>
        {scenarios.map(scenario => (
          <Carousel.Item key={scenario.id}>
            <div className="scenario-container">
              <ScenarioDescription scenario={scenario} />
            </div>
          </Carousel.Item>
        ))}
      </Carousel>
    )
  }

and this is the state where I set all those props:

this.state = {
      index: 0,
      direction: 'next',
      interval: 2,
      indicators: false,
      pauseOnHover: true,
      slide: true,
      wrap: true
    }

but the carousel wouldn't start autoplaying. any suggestions? am I missing something?

[taion]

If you control the carousel by setting activeIndex, then it's not going to transition the active item on you. Refer to the carousel examples in the docs.

[ckiss]

I figured it out after a while. Thank you @taion and sorry for this :)

[weisssean]

If you do this:

componentDidMount(){ this.setState({activeIndex:0}) }

It will start the sycle.