slickGoTo doesn’t change active slide

I added slider using react-slick to my React app. For <Slider> I added ref, and I’m trying use it to change active slide:

import React, { useRef } from 'react';
import Slider from 'react-slick';

const TestSlider = () => {
  const handleOnClick = index => {
    sliderRef.slick('slickGoTo', index);
    // also try sliderRef.slickGoTo(index);
  };

  <Slider {...settings} ref={sliderRef}>
    ...
  </Slider>
}

but I got an error:

TypeError: sliderRef.slick is not a function

Why doesn’t this work for me?

“react”: “^16.6.3”,

“react-slick”: “^0.27.12”,

Answer

According to react-slick’s slickGoTo() documentation, you need to pass a function as the ref. Something like:

  const handleOnClick = index => {
    this.slider.slickGoTo(index);
  };

  <Slider {...settings} ref={slider => (this.slider = slider)}>
    ...
  </Slider>

If you want to create a ref using the useRef hook, it would look like:

  const sliderRef = useRef();

  const handleOnClick = index => {
    sliderRef.current.slickGoTo(index);
  };

  <Slider {...settings} ref={sliderRef}>
    ...
  </Slider>