Issue
Recently, we were developing a carousel feature in SPFx webpart. We got React component code from the UI Team, which has used React Responsive Carousel with sample data, and it was working fine. We needed to make the carousel dynamic and fetch data from the SharePoint list.
When we incorporated the changes, we faced a strange issue. When we provide the dynamic data, the carousel will load only the last item and will not rotate. But if we passed static data, it worked fine.
Analysis
As the web part was working with static data, we were not sure it was an issue with the component. It meant there was something missing from the implementation part. So we started looking into 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 that if dynamic loading might be causing the issue, then we could 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) => {
return (
<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 hides the component and showcases nothing on the page (Though earlier code showcased at least the last item??). But this failure confirmed that the fault is not within the implementation but is from the 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 a version issue. Many people have mentioned that downgrading the version to a 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 in 2019, and the issue persists, I thought it would be helpful to someone with the same issues.
References