I use React-Carousel to implement a carousel for my app. however i found something is weird. the carousel is functiong well during the run. However I refresh the browser with F5 key, the carousel disappear. here is the snippet of code for the carousel.
return <CarContainer>
<Carousel value={current} onChange={setCurrent} slides={cars.map(item=><Car {...item} />)}
plugins={[
"clickToChange",
{
resolve: slidesToShowPlugin,
options: {
numberOfSlides: 3,
},
},
]}
breakpoints={{
640: {
plugins: [
"clickToChange",
{
resolve: slidesToShowPlugin,
options: {
numberOfSlides: 1,
},
},
],
},
900: {
plugins: [
{
resolve: slidesToShowPlugin,
options: {
numberOfSlides: 2,
},
},
],
},
}}
/><Dots value={current} onChange={setCurrent} number={numberOfDots}/>
</CarContainer>the root cause of this issue is that the cars object is still null, whenn it
render during the refresh.
slides={cars.map(item=><Car {...item} />)}the safe way and best practice is to make sure the data is ready before the
component rendering. since the component will not render after the data
is ready, unless we update the cars object in the useEffect hook.
We can either check if cars object is null return null to prevent the
carousel render. if(!cars) return null;
or we can use the inline conditional expression wiht logical && operator.
return cars && <CarContainer>
<Carousel value={current} onChange={setCurrent} slides={cars.map(item=><Car {...item} />)} plugins={[ "clickToChange", { resolve: slidesToShowPlugin, options: { numberOfSlides: 3, }, }, ]} breakpoints={{ 640: { plugins: [ "clickToChange", { resolve: slidesToShowPlugin, options: { numberOfSlides: 1, }, }, ], }, 900: { plugins: [ { resolve: slidesToShowPlugin, options: { numberOfSlides: 2, }, }, ], }, }} /><Dots value={current} onChange={setCurrent} number={numberOfDots}/> </CarContainer>
