React-responsive-carousel: How do I access the selectedItem state?

[vatsal28]

I want to trigger a function based on the "selectedItem" state of the Carousel element.
For example:

Whenever I click on the left or right arrow, the "selectedItem" state changes accordingly (0,1,2, etc. ) and I want to access that number in the state. How do I achieve that?

[leandrowd]

You can use the onChange handler. Check the docs and the storybook for examples. It's all on the readme :)

[vatsal28]

The storybook link is giving me a 404 error :/.
Also, onChange is only working when the page refreshes, not when I click the left or right arrows

[leandrowd]

Oh, thanks for letting me know. I'll check what's happening tomorrow when I'm on a computer. For now, check https://github.com/leandrowd/react-responsive-carousel/blob/master/stories/index.js#L59 for reference.

[vatsal28]

This worked to some extent. This is the code:

class DemoCarousel extends Component {
constructor(props){
    super(props);
    this.state = {currentSlide:0};
}
updateCurrentSlide = (index) => {
        const { currentSlide } = this.state;

        if (currentSlide !== index) {
            this.setState({
                currentSlide: index
            });
        }
}
    render() {
        return (
            <Carousel className = "Carousel" infiniteLoop={true} showThumbs={false} showStatus={true} onChange={this.updateCurrentSlide}>
                 {images.map((singleImage, i) => <img src={singleImage} key={i} />)}
            </Carousel>
        );
    }
}

But when I'm clicking on the "next" arrow, it goes back to first image instead of the next one. It is cycling only through 2 images even though there are 8.

[vatsal28]

Figured it out . Thanks!

[leandrowd]

I republished the storybooks and they seem to be fine now :)

[vatsal28]

Thanks!

[Calicorio]

Hi @vatsal28 , I'm having the same problem as you had : "when I'm clicking on the "next" arrow, it goes back to first image instead of the next one. It is cycling only through 2 images even though there are 8". How did you solve it?

[rubangarmon]

Hi @vatsal28 and @Calicorio what did you do for solving it?

[rubangarmon]

onChange() method is being called twice when I update any state property. It only calls the first 2 slices. I need to capture the event for updating styles on next slide.

[zxpectre]

Hi @vatsal28 and @Calicorio what did you do for solving it?

Any news? please I'm dying against the same issue here

[zxpectre]

I solved it.
Hope it helps somebody.
The bug goes away when controlling it externally.

const ExternalControlledCarousel = (props)=>{
  //This wrapper not only allows more controll,but also fixes an uggly bug where native next and prev buttons don't work well on more than 2 items
  const {onChange,children} = props;
  const [values, setValues] = React.useState({
    currentSlide:0,
  });

  const next = () => {
      setValues({ ...values, currentSlide: values.currentSlide+1 });
  }
  const prev = () => {
      setValues({ ...values, currentSlide: values.currentSlide-1 });
  }
  const update = (index,component) => {
    if (onChange)
      onChange(index,component);
    if (values.currentSlide !== index){
      setValues({ ...values, currentSlide: index });
    }
  }

  return (
    <Carousel  {...props} selectedItem={values.currentSlide} onChange={update}>
        { children }
    </Carousel>
  );
}

[Calicorio]

Hi @vatsal28 and @Calicorio what did you do for solving it?

Since it is a doubt I had more than a year ago I can't remember how I solved it, but it seems that @zxpectre has found a solution :)