javascript - Uncaught type error: cannot read property persist of undefined with react-bootstrap carousel -

i'm implementing react-bootsrap carousel react-redux , i'm getting error in title.

i'm using controlled carousel , error message appears when carousel changes slide automatically.

when user clicks prev. next buttons , changes manually seems ok.

i don't should add persist props or options props or similar?

here's code:

container:

import react, { component } 'react' import { connect } 'react-redux' import { link } 'react-router' import store 'store/configurestore' import slides 'components/slideshow' import { getinitalslides, handleselect } 'actions/slidesactions'  class home extends component {  constructor(props) {     super(props)     this.state = {         index: null,         direction: null     }     this.handleselect = this.handleselect.bind(this)      static fetchdata({ store }) {         return store.dispatch(getinitalslides())     }      componentdidmount() {         this.props.getinitalslides()     }  handleselect(selectedindex, e) {         //alert(e)         this.props.handleselect(selectedindex, e)     }    render() {     return (       <div classname="home">         <h1>home page</h1>         <slides          slides={this.props.slides}            getinitialstate={this.state.index}          getinitialstated={this.state.direction}         slidescontrol={this.handleselect}         />         <div><link to="/question">to question</link></div>         <div><link to="/posts">to posts</link></div>       </div>     )   } }  function mapstatetoprops (state) {   const { slides, handleselect } = state    return { slides: state.slides, onselect: state.handleselect }  }  export { home } export default connect(mapstatetoprops { getinitalslides, handleselect})(home) 

and here relevant bit in component:

    render() {      return (       <carousel        activeindex={this.props.getinitialstate}        direction={this.props.getinitialstated}        onselect={(selectedindex,e)=>this.props.slidescontrol(selectedindex,e)}       >       {        this.props.slides.map((s)=>{               let id = s.get('id')               let title = s.get('title')               let image = s.get('image')               let alt = s.get('alt')               let caption = s.get('caption')               return(                      <carousel.item key={id} >                     <img width={900} height={500} alt={s.get('alt')} src={image} alt={alt}/>                     <carousel.caption>                       <h3>{title}</h3>                       <p>{caption}</p>                     </carousel.caption>                   </carousel.item>                )       })         }     </carousel>)   } } 

edit: here relevant react-bootstrap carousel code (where error thrown)

  var onselect = this.props.onselect;    if (onselect) {     if (onselect.length > 1) {       // react syntheticevents pooled, need remove event       // pool add custom property. avoid unnecessarily       // removing objects pool, when listener       // wants event.       e.persist();       e.direction = direction;        onselect(index, e);     } else {       onselect(index);     }   } 

i analyzed carousel.js code of react-bootstrap , suspect issue in react-bootstrap library itself.

there line triggering change in carousel.js code:

this.timeout = settimeout(this.next, this.props.interval); 

this.next method expects parameter of type synteticevent, none passed settimeout call. exlpains error message: ...persist of undefined....

the issue hidden long time, but exposed commit, event parameter used carousel.ja code itself.

so recommend create react-bootstrap github issue , in meantime downgrade version doesn't contain mentioned commit.