react-slick: Cannot read property 'getBoundingClientRect' of null

This happens anytime your slides are custom React components. For example, this doesn’t work…

<Slider>
{ slides.map(slide => <CustomSlide />) }
</Slider> 

This works…

<Slider>
{ slides.map(slide => <div><CustomSlide /></div>) }
</Slider> 

this.list ref doesn’t get set

Make sure imgDivs is not empty inside Slider

{imgDivs.length > 0 ? <Slider {...settings}>{imgDivs}</Slider>: null}

@thangytp I actually tried this already and it does not work for me, I have this instead but think it is the same thing:

 let imgDivs = (images || []).map((image, index) => {
                    return (
                      <div key={image.imageId}>
                        <img src={image.imageUrl}  />
                      </div>
                    )
                  });

    if (!images.length) imgDivs = <div></div>;

and then call the slider:

<Slider {...settings}>
   { imgDivs }
</Slider>

Sure - this doesn’t work:

          <Slider {...settings}>
            {slides.map(slide => <SliderItem key={slide.id} slide={slide} />)}
          </Slider>

and SliderItem is: const SliderItem = (props) => <div><h3>{props.slide.tagline}</h3></div>

However, this works:

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

But it kind of counteracts the point of breaking the code out to a functional component, don’t you think?

UPDATE: I just noticed that the author replied in #328 that wrapping in a div is his suggestion or as an alternative passing in props to the root component should do the job. In my case, doing the following instead of wrapping in a div worked for me, and seems tidier to me: const SliderItem = (props) => <div {...props}><h3>{props.slide.tagline}</h3></div>

So I’m happy, but that really needs to go into the Readme!

Currently, this library relies on the user’s components (slides) forwarding the libraries ref prop to their DOM elements. This means…

1. The user must forward the ref prop to their outermost DOM element
2. The user can’t use their ownref

A better solution would probably be to wrap all user components in a style-less div that fills its container and put the library ref there and use this for all library calculations. Something like this (psuedo-code)…

React.Children(this.props.children).map((slide, i) => (
    <div ref={c => this.slides[i] = c }>{ slide }</div>
))

Warning: I haven’t actually read the code and I’m not actually using this library or I’d send a PR. Just trying to help as I’m quite familiar withref issues in React

I’m using jest to test my components and I can’t make this work, wrapping the components with a div doesn’t help

We noticed the same error when rendering a slider that has an empty array of childcomponents:

<Slider {...settings}>
  { [] }
</Slider>

Our solution was to check for empty array and not render the slider at all.

Just wanted to jump in here and say that I’m getting this error also while running Jest tests on a Carousel component that uses react-slick under the hood.

hi @sayayinR, have you try to wrap {imgDivs} with <div> like this:

<div>{imgDivs}</div>

if it works and renders duplicate content, you should try the code in pure javascript like me.

Hi there, I’ve resolved it. Here is my solution.

            let listSiteShow = [];
	    if( this.state.listSite.length>0 ) {
			for(var i = 0; i<this.state.listSite.length; i++){
				listSiteShow.push( <div key={i}><h3>{ this.state.listSite[i].name }</h3></div> );
			}
		}
		else listSiteShow.push(<div></div>);
		return(
			<div className="col-md-12" style={{'clear':'both'}}>
				<Slider {...settings}>
					
					{ listSiteShow }
					
                                </Slider>
			</div>
		);

Hope this help to all you!

If you are mapping from props, e.g

this.props.images.map(image => <img src={image} />)

Check if the props are a null before you check the length of the props.

{  this.props.images !== null && this.props.images.length > 0 ? <Slider/> :  <div>...loading</div>  }.

This worked for me.

@shafy Absolutely, I just meant that I was happy to be able to get on with my own project… At the time, I removed the warning as follows:

const SliderItem = (props) => {
  /* Remove slide item from props, to avoid Unknown Prop Warning on the div. 
  See https://facebook.github.io/react/warnings/unknown-prop.html */
  const divProps = Object.assign({}, props);
  delete divProps.slide;
  return <div className="App-container" {...divProps} >
           <img className="App-images" alt={props.slide.tagline} src={props.slide.imgsrc}/>
        </div>
}

For me the problem was that my <Slider> component didn’t have any children (in a particular use case).

@seleckis React does allow div (and everything else) to have a key. key is a special prop that does not get added to the actual DOM, so it’s allowed (and actually required). Otherwise you could never render a list of anything except custom components that explicity filter out the key prop. That would be awful.

Here is an example. Notice there are no warnings in the console