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

[sayayinR]

Not sure how it the fix here 328, I did this:

render() {
  let imgTpl = (images || []).map((image, index) => {
     return (
     <div key={image.Id} >
        <img src={image.url}  /></div>
     );
  });
}

return(
  <Slider {...settings}>
    { imgTpl }
   </Slider>
)

There is a div around the image items but it still does not work.

[thangytp]

Got same problem. And can't fix it. Any help?

[g4rick]

same problem TOT

[thangytp]

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!

[sayayinR]

@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>

[thangytp]

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.

[akiran]

Make sure imgDivs is not empty inside Slider

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

[sayayinR]

@thangytp I did that and no difference. I'm not sure what you mean by regular javascript because I am using javascript ES6.

[sayayinR]

So here is the deal, trying out a bunch of things the issue got solved a while back by adding this line:

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

The carousel still does not look good, so thought it was still not working, I was using the jquery carousel before and all styles looked fine. Didn't think I will have to adjust/add any CSS. Doesn't this carousel use the same CSS as the original slick carousel?

[akiran]

can you provide code snippet to replicate to issue ?

[cmmartin]

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

[reintroducing]

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.

[seleckis]

@cmmartin .map without key causes warning:

warning.js:36 Warning: Each child in an array or iterator should have a unique "key" prop.

But React does not allow div to have key.

[icetronics]

getting this error also while running Jest tests

have you managed to find a workaround for Jest? thanks!

[reintroducing]

@icetronics I had to basically mock the whole component which made the test pretty useless :\

[icetronics]

ah okay, thanks tho ;) I tried putting fixed width divs everywhere (around the slider, around each item) nothing helped..
if anyone has a solution for testing with Jest, please come forward

[cmmartin]

@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

[cmmartin]

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

[cjke]

@cmmartin Thanks for actually explaining the underlying issue!

[seleckis]

@cmmartin sorry, I was using old react version

[chellberg]

I thought I was experiencing this issue, even after wrapping my slides in empty divs, but while I was getting this error ^, the problem was that I was referencing a prop using the wrong name and giving <Slider> null or undefined as children instead of an array of DOM elements.

So, check that your array of slides is actually an array of slides.

[shenders13]

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

[karna41317]

+1, got same problems, just picked example code and got same error as above.

[amaldare93]

Im having this problem, even with the check for empty array of items, and i found out that it is only erroring when dots={true}. If i disable the dots, it doesnt error

using:

"preact": "^7.2.0",
"preact-compat": "^3.14.3",
"react-slick": "^0.14.7",

my code:

class Carousel extends Component {
  render ({ settings, styles, layout, apiUrl, content, components }) {
    return (
      <ThemeProvider theme={{ styles, layout }}>
        <Container>
          {content.length ? <Slider
            arrows={true}
            dots={true} // Breaks when `true`, works when `false` or disabled
            infinite={true}
            speed={500}
            slidesToShow={1}
            slidesToScroll={1}
          >
            {content.map(item => (
              <div>
                <Item style={{ 'background-image': `url(${item.image || placeholder})` }}>
                  {/* ... */}
                </Item>
              </div>
            ))}
          </Slider> : <div></div>}
        </Container>
      </ThemeProvider>
    )
  }
}

[carlows]

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

[michaelgichia]

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.

[padsbanger]

Any progress on this issue ? Tried wrapping slides in divs, and checked for null before mapping, still broken.

[sinewave440hz]

Hi, also having this problem and wondering about progress on this. I was mapping an array to a div with an h3 inside, much like the given example. I then refactored this out to a simple functional component Slide and that's when it stopped working. Anyone feel able to do a PR of that fix proposed by @cmmartin?

[michaelgichia]

@sinewave440hz can you post a sample of your code?

[sinewave440hz]

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!

[michaelgichia]

@sinewave440hz I'm glad it worked. Yes, it needs to go to the docs asap.

[shafy]

@sinewave440hz that does work, but it definitely seems like a hacky workaround to pass random props to a div. React even throws the warning Warning: Unknown prop 'article' on <div> tag

[sinewave440hz]

@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>
}

[arbind]

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.

[tonioriol]

same problem, rendering a list of custom components as a childerns, solved it with @cmmartin solution.

So if you are using custom components inside the Carousel, just surround them with a regular div.

<Carousel {...settings}>
  {this.state.entry.images.map((image, key) => <div key={key}>
      <Img
        src={image.src}
        fallbackImage={defaultImage}
        alt={image.title}
        className="Carousel-img"
      />
  </div>)}
</Carousel>

[akiran]

Fixed this issue in master