Recently, we were developing a carousal feature in SPFx webpart. We got react component code from UI Team which has used React Responsive Carousel with sample data, and it was working fine. We needed to make the carousal dynamic and fetch data from SharePoint list.
When we incorporated the changes, we faced a strange issue. When we provide the dynamic data, the carousal will load only last item and doesn’t rotate. But if we pass static data, it worked fine.
Analysis:
As the webpart working with static data, we were not sure it was issue from the component. It meant there was something missing from the implementation part. So we started looking in to online resources. One such link mentioned we needed to explicitly give the CSS path in the import as follow:
import 'react-responsive-carousel/lib/styles/carousel.min.css'
It didn’t change the output. So, we thought if dynamic loading might be causing the issue, then we can generate HTML first and directly pass it to the component. So, we changed our component code from below:
public render(): React.ReactElement<IReactCarousalProps> {
const images = this.state.carousaldata;
return (
<div className='min-h-screen'>
<Carousel showArrows={true} showThumbs={true}>
{images.map((url, index) => {
<div key={index}>
<img src={url.name} />
</div>;
})}
</Carousel>
</div>
);
}
And updated as below:
public render(): React.ReactElement<IReactCarousalProps> {
var images = this.state.carousaldata;
var htmlBody = “”;
images.map((url, index) => {
htmlBody+=” <div key={index}><img src={url.name} /></div>”
})
return (
<div className='min-h-screen'>
<Carousel showArrows={true} showThumbs={true}>
{htmlBody}
</Carousel>
</div>
);
}
But this completely hide the component and showcase nothing on the page (Though earlier code showcase at least last item😊). But this failure confirmed that fault is not within the implementation but is from component itself and after that we have gone through the repository issue and find out similar issue and found the resolution.
Resolution:
So, we found that it might be version issue. Many people have mentioned that downgrading the version to lower version (3.1.33) has resolved the issue for them.
But in one such comment we found that there is an alternative too. If the carousal is initialized with zero content, it will break. If it is initialized with proper data, it will work properly. So, the user has suggested that we need to check before binding component, it our data is not there, do not bind the component.
The sample code will look like:
public render(): React.ReactElement<IReactCarousalProps> {
const images = this.state.carousaldata;
return (
<div className='min-h-screen'>
{ images.length > 0 ? (
<Carousel showArrows={true} showThumbs={true}>
{images.map((url, index) => {
<div key={index}>
<img src={url.name} />
</div>;
})}
</Carousel>) : null}
</div>
);
}
Though the user input was done on 2019, and the issue persist, I thought it would be helpful to someone with same issues.
References:
- React Responsive Carousel Sample - https://github.com/leandrowd/react-responsive-carousel
- Issue resolution link - https://github.com/leandrowd/react-responsive-carousel/issues/321
- CSS Reference - https://stackoverflow.com/questions/66554854/react-responsive-carousel-is-not-displaying-properly
