title: Uncaught type error: cannot read property persist of undefined with react-bootstrap carousel
body: <p>I'm implementing a <a href="https://react-bootstrap.github.io/components.html#carousels" rel="nofollow" title="react-bootstrap">react-bootsrap</a> carousel with react-redux and I'm getting the error in the title. </p>
  
  <p>I'm using a controlled carousel and the error message appears when the carousel changes a slide automatically.</p>
  
  <p>When the user clicks prev. next buttons and changes it manually all seems to be ok.</p>
  
  <p>I don't get it should I add persist as props or options to props or similar? </p>
  
  <p>Here's my code:</p>
  
  <p>container:</p>
  
  <pre><code>import React, { Component } from 'react'
  import { connect } from 'react-redux'
  import { Link } from 'react-router'
  import store from 'store/configureStore'
  import Slides from 'components/SlideShow'
  import { getInitalSlides, handleSelect } from '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 (
        &lt;div className="Home"&gt;
          &lt;h1&gt;Home Page&lt;/h1&gt;
          &lt;Slides 
          slides={this.props.slides}   
          getInitialState={this.state.index} 
          getInitialStateD={this.state.direction}
          slidesControl={this.handleSelect}
          /&gt;
          &lt;div&gt;&lt;Link to="/question"&gt;to question&lt;/Link&gt;&lt;/div&gt;
          &lt;div&gt;&lt;Link to="/posts"&gt;to posts&lt;/Link&gt;&lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  function mapStateToProps (state) {
    const { slides, handleSelect } = state
  
    return { slides: state.slides, onSelect: state.handleSelect } 
  }
  
  export { Home }
  export default connect(mapStateToProps { getInitalSlides, handleSelect})(Home)
  </code></pre>
  
  <p>and here is the relevant bit in the component:</p>
  
  <pre><code>    render() {
  
      return (
        &lt;Carousel 
        activeIndex={this.props.getInitialState} 
        direction={this.props.getInitialStateD} 
        onSelect={(selectedIndex,e)=&gt;this.props.slidesControl(selectedIndex,e)}
        &gt;
        {
  
        this.props.slides.map((s)=&gt;{
                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(
  
                      &lt;Carousel.Item key={id} &gt;
                      &lt;img width={900} height={500} alt={s.get('alt')} src={image} alt={alt}/&gt;
                      &lt;Carousel.Caption&gt;
                        &lt;h3&gt;{title}&lt;/h3&gt;
                        &lt;p&gt;{caption}&lt;/p&gt;
                      &lt;/Carousel.Caption&gt;
                    &lt;/Carousel.Item&gt;
  
                )
        }) 
  
  
  
      }
      &lt;/Carousel&gt;)
    }
  }
  </code></pre>
  
  <p>Edit: 
  Here is the relevant react-bootstrap carousel code (where the error is thrown)</p>
  
  <pre><code>  var onSelect = this.props.onSelect;
  
    if (onSelect) {
      if (onSelect.length &gt; 1) {
        // React SyntheticEvents are pooled, so we need to remove this event
        // from the pool to add a custom property. To avoid unnecessarily
        // removing objects from the pool, only do this when the listener
        // actually wants the event.
        e.persist();
        e.direction = direction;
  
        onSelect(index, e);
      } else {
        onSelect(index);
      }
    }
  </code></pre>