How can add the list which pass it as data? every time I add item in list of data, the app will fail

[SKEMahmoud]

When i pass data dynamically and the data list may increase or decrease , the app fail as the screenshot .

and i tried to set the maxVisibleSlide and currentVisibleSlide dynamically but they have an issue

[SKEMahmoud]

and this occurs when add the item number 3 and item number 5

[SKEMahmoud]

[BotDanny]

Please post a codesandbox link to reproduce the issue

[SKEMahmoud]

I don't have codesandbox for it I just applied the liberary as the above screenshot in the component which has a incremental and decremental methods for the slides list and it works normally in all cases but there is strange case when i add item to list and this item will be index 2, the error occurs as the first screenshot

[SKEMahmoud]

and this is the error in console Uncaught TypeError: Cannot read properties of undefined (reading 'key') at index.modern.js:138:1 at Array.forEach () at _loop (index.modern.js:126:1) at StackedCarousel._this.initializeProperties (index.modern.js:149:1) at StackedCarousel.componentDidUpdate (index.modern.js:623:1) at commitLayoutEffectOnFiber (react-dom.development.js:20200:1) at commitLayoutMountEffects_complete (react-dom.development.js:21341:1) at commitLayoutEffects_begin (react-dom.development.js:21330:1) at commitLayoutEffects (react-dom.development.js:21276:1) at commitRootImpl (react-dom.development.js:23186:1)

[BotDanny]

Sorry I can only do investigation with a codesandbox.

[SKEMahmoud]

https://codesandbox.io/s/react-stacked-center-carousel-forked-l6l3k9?file=/src/components/carousel.js

this is example for what i mean

[SKEMahmoud]

[SKEMahmoud]

if you need more explanation , we can have a call on zoom

[BotDanny]

I don't see any error in the sandbox link you posted. Please provide a sandbox link that has exactly what's shown in your screenshot.

[SKEMahmoud]

https://codesandbox.io/s/react-stacked-center-carousel-forked-l6l3k9?file=/src/components/carousel.js

[BotDanny]

I don't see any error.

[BotDanny]

Ok, I get it now, you are trying to add more data items

[SKEMahmoud]

Try this. Sorry for disturb but this is the first time using codesandbox https://codesandbox.io/s/flamboyant-feather-5jgyj7

[SKEMahmoud]

yes when I try to add data on list which it includes 2 object inside it then make the maxVisibleSlide and currentVisibleSlide are dynamically based on the data list length but it fails

[SKEMahmoud]

Could you send me if you reach to the solution because i tried a lots of work around but all tries failed ?

[BotDanny]

Hi, I will be looking into this. Thanks for your report.

[SKEMahmoud]

When may you be fix it because i need the solution urgently. I have a deadline tomorrow. sorry for disturb and thanks for your support

[BotDanny]

The reason you see the error is that maxVisibleSlide is not meant to be dynamic. That prop should be static. I did not account for dynamic maxVisibleSlide from the beginning and will likely require some substantial work to add support for dynamic maxVisibleSlide. However, as a workaround, you can define different carousels for different maxVisibleSlide and render one of them according to maxVisibleSlide. See this for example: https://codesandbox.io/s/magical-pateu-xg5mh5?file=/src/components/carousel.js

[SKEMahmoud]

Thanks so much, I will apply your work around. Appreciated your effort.

[dylanbartley]

I pushed an update to my forked repo to help deal with this. feel free to check it out. It works for my use case at least. although due to what I assume is ghost rendered slide objects which now 'undefined' data objects, I can an error when loading image urls. e.g. http://localhost:3000/project/undefined.jpg 404 (Not Found)