Uncaught TypeError: Cannot read property 'slideHandler' of undefined

[Mehrdad-Dadkhah]

I install:

"react-slick": "^0.25.2",
"slick-carousel": "^1.8.1"

in auto play or when I click next I get this exception:

inner-slider.js:479 Uncaught TypeError: Cannot read property 'slideHandler' of undefined
    at InnerSlider.<anonymous> (inner-slider.js:479)
    at callCallback (react-dom.development.js:12490)
    at commitUpdateQueue (react-dom.development.js:12511)
    at commitLifeCycles (react-dom.development.js:19858)
    at commitLayoutEffects (react-dom.development.js:22803)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at commitRootImpl (react-dom.development.js:22541)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at commitRoot (react-dom.development.js:22381)
    at finishSyncRender (react-dom.development.js:21807)
    at performSyncWorkOnRoot (react-dom.development.js:21793)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at scheduleUpdateOnFiber (react-dom.development.js:21199)
    at Object.enqueueSetState (react-dom.development.js:12639)
    at InnerSlider.dll_2adc2403d89adc16ead0../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:471)
    at InnerSlider.slideHandler (inner-slider.js:478)
    at inner-slider.js:639

My sample code:

<Slider
     {...settings}
     className="slick-carousel testimonial-thumb-wrap"
 >
     <div className="items"></div>
     ..
     ..
     ..
</Slider>

[LucySpass]

Hi! I had the same issue when having one <Slider/> from my custom <CustomSlider/> component and one <Slider/> directly imported from "react-slick".

I fixed the issue by removing my CustomSlider component. It works fine in custom component, but I needed to implement asNavFor that broke because of usage of ref

So my Slider usage ended up looking like this:

<Slider   
    asNavFor={this.state.nav2}
    ref={slider => (this.slider1 = slider)}
    {...settings}>
        {this.state.pages.map((page) => (<div>...))}
...

Hope it helps!

[joe4mg]

I got this error when using a component class and trying to assign the sliders to this.state in the constructor rather than via this.setState in componentDidMount

[tayloraucoin]

I got this when using the react hook useRef. You have to use the old ref method from the docs

My hook based solution:

const [slider1, setSlider1] = useState(null);
const [slider2, setSlider2] = useState(null);

return (
    <Root>
      <Slider
        asNavFor={slider2}
        ref={(slider) => setSlider1(slider)}
      >
        {IMAGES.map((imageUrl) => {
          return <img key={imageUrl} src={imageUrl} />;
        })}
      </Slider>
      {IMAGES.length > 1 ? (
        <Slider
          asNavFor={slider1}
          className="image-carousel-secondary"
          focusOnSelect={true}
          ref={(slider) => setSlider2(slider)}
          slidesToShow={3}
          swipeToSlide={true}
        >
          {IMAGES.map((imageUrl) => {
            return <img key={imageUrl} src={imageUrl} />;
          })}
        </Slider>
      ) : null}
    </Root>
  );

[jkmcrg]

@tayloraucoin You are a legend, and a hero.

[kaushikvaliya]

inner-slider.js:479 Uncaught TypeError: Cannot read property 'slideHandler' of undefined
    at InnerSlider.<anonymous> (inner-slider.js:479)
    at callCallback (react-dom.development.js:12490)
    at commitUpdateQueue (react-dom.development.js:12511)
    at commitLifeCycles (react-dom.development.js:19858)
    at commitLayoutEffects (react-dom.development.js:22803)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at commitRootImpl (react-dom.development.js:22541)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at commitRoot (react-dom.development.js:22381)
    at finishSyncRender (react-dom.development.js:21807)
    at performSyncWorkOnRoot (react-dom.development.js:21793)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at scheduleUpdateOnFiber (react-dom.development.js:21199)
    at Object.enqueueSetState (react-dom.development.js:12639)
    at InnerSlider.dll_2adc2403d89adc16ead0../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:471)
    at InnerSlider.slideHandler (inner-slider.js:478)
    at inner-slider.js:639

 const [nav1, setNav1] = useState(null);
 const [nav2, setNav2] = useState(null);

 const sliderRef1 = useRef(null);
 const sliderRef2 = useRef(null);

 useEffect(() => {
    setNav1(sliderRef1.current);
    setNav2(sliderRef2.current);
 }, []);