React-slick: useRef react hooks syncing with typescript issue

[inquiztr]

I had trouble using Refs and Functional components myself. This is what I got working:
````
import React, { useEffect, useState, useRef } from 'react';
import Slider from 'react-slick';

const SliderSlick = () => {
const [nav1, setNav1] = useState();
const [nav2, setNav2] = useState();
const slider1 = useRef();
const slider2 = useRef();

// i dont seem to need this
//useEffect(() => {
//    setNav1(sliderEl1);
//    setNav2(sliderEl2);
//  }, []);

return (
    <>
        <Slider asNavFor={nav2} ref={slider1 => setNav1(slider1)}>
            <div>
                <h3>1</h3>
            </div>
            <div>
                <h3>2</h3>
            </div>
            <div>
                <h3>3</h3>
            </div>
            <div>
                <h3>4</h3>
            </div>
            <div>
                <h3>5</h3>
            </div>
            <div>
                <h3>6</h3>
            </div>
        </Slider>

        <Slider
            asNavFor={nav1}
            ref={slider2 => setNav2(slider2)}
            slidesToShow={3}
            swipeToSlide={true}
            focusOnSelect={true}
        >
            <div>
                <h3>1</h3>
            </div>
            <div>
                <h3>2</h3>
            </div>
            <div>
                <h3>3</h3>
            </div>
            <div>
                <h3>4</h3>
            </div>
            <div>
                <h3>5</h3>
            </div>
            <div>
                <h3>6</h3>
            </div>
        </Slider>
    </>
);

};

export default SliderSlick;
````

[krupasavadiya]

@inquiztr
Thank you for quick response :)
It's work for me but have an issue with first item means bottom slider sync to top slider for all item except first. when i click any item from bottom slider it sync and that item displayed in top slider but when i go to first item it can't sync to top slider. Don't know why?
any idea about that?

[inquiztr]

Hmm I didnt notice that. I am only just got mine working with sample images and still hooking mine up to connect to an api to get the proper images. I will check to see if my first images are not synched as well and see what is going on. Does un-commenting the useeffect section I commented, have any improvment?

[krupasavadiya]

No when i un-comment that useEffect section got another issue of
Cannot read property 'slideHandler' of undefined

[inquiztr]

I placed my code in codesandbox and it seems to be working (top and bottom slider are synchronized) and i dont seem to need the useffect. https://codesandbox.io/s/react-slick-demo-mshh4
Do you see the issue here?

[inquiztr]

Ok I think I have it working without errors now : https://codesandbox.io/s/react-slick-demo-27z23
Please try this one and ignore the other one.

[krupasavadiya]

Ok I think I have it working without errors now : https://codesandbox.io/s/react-slick-demo-27z23
Please try this one and ignore the other one.

Yes, It work now as expected. Thank you so much @inquiztr

[pnghai]

I had trouble using Refs and Functional components myself. This is what I got working:

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

const SliderSlick = () => {
    const [nav1, setNav1] = useState();
    const [nav2, setNav2] = useState();
    const slider1 = useRef();
    const slider2 = useRef();

    // i dont seem to need this
    //useEffect(() => {
    //    setNav1(sliderEl1);
    //    setNav2(sliderEl2);
    //  }, []);

    return (
        <>
            <Slider asNavFor={nav2} ref={slider1 => setNav1(slider1)}>
                <div>
                    <h3>1</h3>
                </div>
                <div>
                    <h3>2</h3>
                </div>
                <div>
                    <h3>3</h3>
                </div>
                <div>
                    <h3>4</h3>
                </div>
                <div>
                    <h3>5</h3>
                </div>
                <div>
                    <h3>6</h3>
                </div>
            </Slider>

            <Slider
                asNavFor={nav1}
                ref={slider2 => setNav2(slider2)}
                slidesToShow={3}
                swipeToSlide={true}
                focusOnSelect={true}
            >
                <div>
                    <h3>1</h3>
                </div>
                <div>
                    <h3>2</h3>
                </div>
                <div>
                    <h3>3</h3>
                </div>
                <div>
                    <h3>4</h3>
                </div>
                <div>
                    <h3>5</h3>
                </div>
                <div>
                    <h3>6</h3>
                </div>
            </Slider>
        </>
    );
};

export default SliderSlick;

Thank, your solution worked smoothly. Anyway, those lines will be never used in the logic,

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

as the slider1 variable inside ref={slider1 => setNav1(slider1)} is just local scoped to the inline function

[jagruti-turtlemint]

[hoektoe]

Ok I think I have it working without errors now : https://codesandbox.io/s/react-slick-demo-27z23
Please try this one and ignore the other one.

Exactly what I was looking for, thanks you so much