showThumbs={true}

When true I get this

When set to false I get no errors and renders fine.

Tumbnails are required so can someone point me into the right direction ? The code is quite simple:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Carousel } from 'react-responsive-carousel';

const ImgSlider = ({ url }) =>{
  return(
  <div className="img-ctn" >
    <img src={url} className="img-responsive"/>
  </div>
);
}


class ProductSlider extends Component {

  render() {

    const {data} = this.props;

    return (
      <div>
           <Carousel showArrows={true} showThumbs={false}>
           {
             data.map((datum,idx) => <ImgSlider key={datum.id} url={datum.url}/>)
           }
            </Carousel>
      </div>
    )
  }
}
export default ProductSlider;

Gracias !

[leandrowd]

Hi @polmoneys, I finally found the problem. You were using a custom component to render the slides. The carousel can’t find the image inside a custom component because it can’t access component.props.children. I just published a version with better error handling to avoid the exception you got but you will need to change your code a little bit.

Please, have a look at https://github.com/leandrowd/react-responsive-carousel/blob/master/TROUBLESHOOTING.md and update your carousel to the version 3.1.3.

[leandrowd]

Hey @polmoneys, sorry, I can’t reproduce this problem. If you want, feel free to fix the problem and send a PR. If you need any help let me know.

Cheers.