Solvedreact slick Problem in rendering Slider with dynamic children

If I render Slider as below:

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

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

Does Slider not expect dynamic children?

@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}>
  {slides.map((slide, index) => (
    <div data-index={index} key={index}>{index}</div>
  ))}
</Slider>

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.

@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{...settings}>
   <div>{this.renderGallery(listing)}</div>
</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 }
   </div>
 }

+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