JAVASCRIPT

Change slick slider slides from another component

import React, { useState, useEffect, useRef } from "react";
import Carousel from "react-slick";
import "slick-carousel/slick/slick.css";

function Parent() {
  const [slideIndex, setSlideIndex] = useState(0);

  return (
    <>
      <Links onClick={setSlideIndex} />
      <Slider slideIndex={slideIndex} />
    </>
  );
}

function Links({ onClick }) {
  return (
    <ul>
      <li>
        <button onClick={() => onClick(0)}>Show Slide 1</button>
      </li>
      <li>
        <button onClick={() => onClick(1)}>Show Slide 2</button>
      </li>
      <li>
        <button onClick={() => onClick(2)}>Show Slide 3</button>
      </li>
      <li>
        <button onClick={() => onClick(3)}>Show Slide 4</button>
      </li>
    </ul>
  );
}

function Slider({ slideIndex }) {
  const slider = useRef();

  useEffect(() => {
    slider.current.slickGoTo(slideIndex);
  }, [slideIndex]);

  return (
    <Carousel ref={slider}>
      <div>Slide 1</div>
      <div>Slide 2</div>
      <div>Slide 3</div>
      <div>Slide 4</div>
    </Carousel>
  );
}
Slider.defaultProps = {
  slideIndex: 0
};