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

I'm implementing a react-bootsrap carousel with react-redux and I'm getting the error in the title.

I'm using a controlled carousel and the error message appears when the carousel changes a slide automatically.

When the user clicks prev. next buttons and changes it manually all seems to be ok.

I don't get it should I add persist as props or options to props or similar?

Here's my code:

container:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import store from 'store/configureStore'
import Slides from 'ponents/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())
    }

    ponentDidMount() {
        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 is the relevant bit in the ponent:

    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 is the relevant react-bootstrap carousel code (where the error is thrown)

  var onSelect = this.props.onSelect;

  if (onSelect) {
    if (onSelect.length > 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);
    }
  }

I'm implementing a react-bootsrap carousel with react-redux and I'm getting the error in the title.

I'm using a controlled carousel and the error message appears when the carousel changes a slide automatically.

When the user clicks prev. next buttons and changes it manually all seems to be ok.

I don't get it should I add persist as props or options to props or similar?

Here's my code:

container:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import store from 'store/configureStore'
import Slides from 'ponents/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())
    }

    ponentDidMount() {
        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 is the relevant bit in the ponent:

    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 is the relevant react-bootstrap carousel code (where the error is thrown)

  var onSelect = this.props.onSelect;

  if (onSelect) {
    if (onSelect.length > 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);
    }
  }

• javascript
• reactjs
• redux
• react-redux
• react-bootstrap

Share Improve this question Follow edited Jul 6, 2016 at 13:44 S. Schenk asked Jul 6, 2016 at 11:26 S. SchenkS. Schenk 2,17055 gold badges2929 silver badges5050 bronze badges 5

• Do you use event parameter e in your handleSelect method? – luboskrnac Commented Jul 6, 2016 at 13:55
• you mean in the action creator? – S. Schenk Commented Jul 6, 2016 at 14:07
• export const HANDLE_SELECT = Symbol('HANDLE_SELECT') export function handleSelect(selectedIndex, e) { return { index: selectedIndex, direction: e.direction, //persist: e.persist, type: HANDLE_SELECT } } – S. Schenk Commented Jul 6, 2016 at 14:07
• yes, in function that is passed to Carousel as onSelect callback. – luboskrnac Commented Jul 6, 2016 at 14:08
• Yeah as you can see above in my action creator which is passed to my onSelect I'm using it to set the direction (e.direction). Not sure of how to use the e.persist though if that is indeed the solution. – S. Schenk Commented Jul 6, 2016 at 14:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I analyzed Carousel.js code of react-bootstrap and I suspect it is issue in react-bootstrap library itself.

There is this line triggering change in Carousel.js code:

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

this.next method expects parameter of type SynteticEvent, but none is passed from setTimeout call. That exlpains your error message: ...persist of undefined....

The issue was probably hidden for a long time, but was exposed with this mit, where event parameter is actually used by Carousel.ja code itself.

So I remend to create react-bootstrap Github issue and in the meantime downgrade to version that doesn't contain mentioned mit.

Here is the issue link in the project's github page. Seems there's a fix ing up:

https://github./react-bootstrap/react-bootstrap/issues/2029