Solvedreact slick Problem in rendering Slider with dynamic children

If I render Slider as below:

<Slider {...settings}>
    { => (
        <div key={slide.index}>{slide.index}</div>

nextProps.children.length in componentWillReceiveProps of class InnerSlider will always returns 1 which breaks the sliding logic.

Does Slider not expect dynamic children?

43 Answers

✔️Accepted Answer

@hackhat I had exactly the same issue and fixed by adding data-index attribute to my slide elements, more or less like this:

<Slider {...settings}>
  {, index) => (
    <div data-index={index} key={index}>{index}</div>

I've just started adding this library to my project, so I'm not sure if it won't cause some other issues later on.

Other Answers:

@samplefrequency Agreed. I will try to fix it soon

Solved it.
Writing it here for ppl who run into this in the future :

Had help from a colleague and he pointed out that I needed only to take out the div from this line

</Slider> : null }

Apparently, if I leave it there, the Slider will pick up that one big

and count that, which means it will not render according to the other many
s within it.

Side note: I didn't even need the data-index in the .map, though the ternary is still needed for fallback purposes.

Code now looks like this:

 {this.props.listingGalleryImages.loaded === true &&
   <div className="container">
       {this.renderGallery(listing).length > 0 ? 
        <Slider {...settings}>{this.renderGallery(listing) </Slider> : null }

+1 same here. basically this line fails return elem.getBoundingClientRect().height || elem.offsetHeight; because elem is null. It comes from slickList.querySelector('[data-index="0"]').

version 15.3.2 Cannot read property 'getBoundingClientRect' of null

Related Issues:

react slick NextJS compatibility
Hi @awitherow in an earlier version of we also used Next.js with Next-CSS ...
react slick Cannot read property 'getBoundingClientRect' of null
This happens anytime your slides are custom React components For example this doesn't work... This w...
react slick Drag on sliders fires a click event
I thought I'd give my two cents and share how I fixed this issue using a React Functional component ...
react slick How to replace the default Arrow with my custom arrow ?
this works for me i replaced the className with slick-arrow I'm trying to replace the default next/p...
react slick Problem in rendering Slider with dynamic children
@hackhat I had exactly the same issue and fixed by adding data-index attribute to my slide elements ...
react slick Blur effect in Chrome 88
It seems like this Chromium bug is probably related to this As you may have noticed from your own ex...
ngx bootstrap fix(tooltip): tooltip flickering when hover the mouse on the border on the tooltip position
Add pointer-events: none; to the tooltip css problem solved! .tooltip { pointer-events: none; } ...
swiper Gallery not working when container div is hidden (display:none)
It is far easier than this Just add: To the swiper initialization. I want the swiper gallery to show...
ng bootstrap No provider for NgbActiveModal! => "Components as content"
try to provide NgbActiveModal on app.module Bug description: When trying to implement the Modal usin...
ngx bootstrap How to pass data to modal ngx-bootstrap and receive return data ?
here is how you send information back to parent component ( calling component) create a EventEmitter...
ngx bootstrap Auto open modal from components
Use ngAfterViewInit instead of ngOnInit The ViewChildis still undefined when the component is initia...
swiper [swiper/react] Custom navigation/pagination components using React refs not working/possible?
I was having a hard time getting some of the above examples to work I ended up using the slidePrev()...
ngx bootstrap BsModalService confirmation modal with yes and no buttons
A possible solution could be: confirmation-modal.component.html confirmation-modal.component.ts: ope...
ng bootstrap No animation for ng-bootstrap modal
You need to add animation css class to global styles and add NgbModalOptions Bug description: Bootst...
swiper Webpack Production Bundling fails because of UglifyJS Error with Dom7
Well there is probably kind of option to look only in node_modules/swiper The reason why i keep it i...
nuka carousel Slide Height Issues On Load
Here is a tricky solution for this problem Declare the Carousel' ref to get images load event then a...
ngx bootstrap Style not working on tabs
If you want to overriding bootstrap rule on the component style file I have the following setup: And...
ng bootstrap Feature request: Support Injection of inputs to Modal
To help everyone decide between various options presented in the design doc here is a quick recap of...
ngx bootstrap Forcefully close all open modals
I can't find documentation for these methods so this may stop working Is there a way to forcefully c...
ngx bootstrap Typeahead : Could we get an example with an actual async observable?
Based on the example I did this: Combined with [typeaheadWaitMs]=300 This helps you? ...
ngx bootstrap how to call modal from parent component,
@xinrui-ma I tried this and its working fine for me I am using ng2-bootstrap for the modal stuff ...
react native snap carousel Invariant Violation: VirtualizedList: The windowSize prop must be present and set to a value greater than 0
Ok I added windowSize={1} and it worked I am getting error as shown in the title react-native: 0.56....
ng bootstrap Server side rendering with universal
I tried the angular-cli guide to enable universal on an Angular app using ng-bootstrap ...
ngx bootstrap Take the initial page for the pagination from a query param
I figured out the problem It's due to the total items The pagination layout is displayed before that...
ngx bootstrap Dropdown not working
This worked for me using a navbar. Hello ...
ngx bootstrap Khronos locale error: please load locale "en" before using it
The right solution for this is to add the defineLocale(‘es’ esLocale) in your component constructor ...
ngx bootstrap Top Right Navbar dropdown goes off the right side of the screen
I was having the same problem but with bootstrap v4-alpha I tried use placement but it didn't work T...
ngx bootstrap Error with new angular RC5
This is what I get trying to compile my project with RC5: Getting this error when angular app starti...
ngx bootstrap fix(positioning): angular 2.2 is throwing issue
ng2 v2.2 added a breaking change to internals working on it Angular v2.2 broke our get root view com...
ngx bootstrap [DatePicker] onChange
You could separate the property binding and the event Hi Is there a way of telling that the date val...
react native snap carousel Feature request/guidance: Zoom an image?
@TeslaAdis Currently the solution we use is the following It works ok on Android and iOS react-nativ...
react native snap carousel Layout is messed up with RTL devices
Hi @bd-arc Big thanks for this lib man! I want to reopen this one I have the same issue as described...
react images closeOnBackdropClick works on backdrop to the left and right of image, but not above and below image
This worked for me as a temporary fix: Not sure if #313 would fix this—I'm not able to look closely ...
react native snap carousel Problem on re-rendering of component, setting a new firstItem index
Hi @KevKo1990 Just a quick thought but does it work if you add extraData={this.state} to the <Carous...
swiper Uncaught TypeError: Controller.LinearSpline is not a constructor
As a workaround you can use UMD build (works with webpack) import Swiper from 'swiper/dist/js/swiper...
swiper Swiper React feedback needed 🧪
@caseymhunt you also need to include Swiper styles e.g.: Hey guys! I am currently working on next ma...
gatsby Error: ENOSPC: System limit for number of file watchers reached, watch '/home/foldername/abcrypto/static'
It’s hitting your system's file watchers limit Try echo fs.inotify.max_user_watches=524288 | sudo te...
react RFClarification: why is setState asynchronous?
So here’s a few thoughts This is not a complete response by any means but maybe this is still more h...
react Preventing rerenders with React.memo and useContext hook.
This is working as designed There is a longer discussion about this in #14110 if you're curious ...
styled components [v4.0.0] Types: Could not find a declaration file for module 'styled-components/native'.
styled-components/native types moved to @types/styled-components-react-native. there are no types fo...
expo Error: fsevents unavailable (this watcher can only be used on Darwin)
Possible solution: I had installed watchman via npm install -g watchman but apparently this installs...
create react app Error: EPERM: operation not permitted, mkdir 'C:\Users\Vaidehi' TypeError: Cannot read property 'get' of undefined
Try installing it globally first using the command npm install -g create-react-app And then you can ...
react React Fire: Modernizing React DOM
I love every of these points except the className change For latest status see an update from June 5...
react starter kit How to call child component method from parent?
For example you can use Refs to Components approach like so: Demo:
react How should we set up apps for HMR now that Fast Refresh replaces react-hot-loader?
Okay here goes What Is Fast Refresh? It's a reimplementation of hot reloading with full support from...
ant motion 模版代码下载下来导入到dva搭建的项目里面,启动时报错(npm start)
开启 JavaScript 就可以了 你好,我下载的Home项目引入到项目工程里面,为了方便,我全部放到了components下面,引入和基本流程没有问题。在家里的win10上面启动没有报错,在win...
react navigation screenIsActive prop / componentDidFocus event for TabNavigator items
It probably makes sense to add lifecycle hooks to screens In one of my Tabs i need to load Data from...
next.js Module not found: Can't resolve 'fs'
Update for modern Next.js (9.4+) You can safely use fs within getStaticProps or getServerSideProps n...
react pdf Failed to load PDF file
@saadpasta @MichaelBlanchet I reckon you are using create-react-app as a boilerplate ? Add/change th...
react swipeable views lazy loading is useless right now
Normally React wants to keep the UI consistent with what you told it to render Lazy loading should m...