React-slick: Change to Functional component

[muscaiu]

Having some issues with refs. Can i get some help changing this class component to a functional component?

export default class Gallery extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nav1: null,
      nav2: null,
    };
  }

  componentDidMount() {
    this.setState({
      nav1: this.slider1,
      nav2: this.slider2,
    });
  }

  render() {
    const settingCarousel = {
      nextArrow: <NextArrow />,
      prevArrow: <PrevArrow />,
    };
    const settingsSliderNav = {
      slidesToShow: 3,
      slidesToScroll: 1,
      dots: false,
      arrows: false,
      focusOnSelect: true,
    };

    return (
      <div>
        <Slider
          asNavFor={this.state.nav2}
          ref={slider => {
            this.slider1 = slider;
          }}
          {...settingCarousel}
        >
          {videos.map(item => (
              <CustomCarousel key={item.position} item={item} isVideo />
            ))}
          {screenshots.map(item => (
              <CustomCarousel key={item.position} item={item} />
            ))}
        </Slider>

        <Slider
          asNavFor={this.state.nav1}
          ref={slider => {
            this.slider2 = slider;
          }}
          slidesToShow={3}
          swipeToSlide
          focusOnSelect
          {...settingsSliderNav}
        >
          {videos.map(item => (
              <CustomNavSlide key={item.position} item={item} isVideo />
            ))}
          {screenshots.map(item => (
              <CustomNavSlide key={item.position} item={item} />
            ))}
        </Slider>
      </div>
    );
  }
}

[tainefreitas]

Oh, I want this too! Maybe we can come together with a solution!
So, I think if we use a AppContext to define a state, then use the dispatch from Redux lab to update the state, and useContext to consult the state. A little bit complicated to understand, but here's a example:
https://reactjs.org/docs/hooks-reference.html
To make a function to this, just use function instead of const...

[tainefreitas]

Monday I can provide some code, this weekend I'm little busy... But if you want more help, we can talk!

[jimmytb]

Hi there,

It should be something like this:

import React, {
  useState,
  useEffect,
  useRef
} from "react";
import Slider from "react-slick";

const Gallery = () => {
  const [state, setState] = useState({
    nav1: null,
    nav2: null
  });

  const slider1 = useRef();
  const slider2 = useRef();

  useEffect(() => {
    setState({
      nav1: slider1.current,
      nav2: slider2.current
    });
  }, []);

  const {
    nav1,
    nav2
  } = state;

  const settingCarousel = {
    nextArrow: <NextArrow />,
    prevArrow: <PrevArrow />,
  };

  const settingsSliderNav = {
    slidesToShow: 3,
    slidesToScroll: 1,
    dots: false,
    arrows: false,
    focusOnSelect: true,
  }

  return (
    <React.Fragment>
      <Slider
        asNavFor={nav2}
        ref={slider => (slider1.current = slider)}
        {...settingCarousel}
      >
        ...
      </Slider>

      <Slider
        asNavFor={nav1}
        ref={slider => (slider2.current = slider)}
        {...settingsSliderNav}
      >
        ....
      </Slider>
    </React.Fragment>
  )
};

export default Gallery;

I did not test this. But this should work. Let me know if you have any questions.

[meetajhu]

@jimmytb Thanks! Helped me for custom events

const next = () => {
    slider1.current.slickNext();
  }
  const previous = () => {
    slider1.current.slickPrev();
  }
return(
<div className="float-right">
<button onClick={previous} className="slick-custom-arrow prev-button"></button>
 <button onClick={next} className="slick-custom-arrow next-button"></button>
</div>
)

[pnghai]

do you get any problem with dots: true?