title: React Slick Sync - functional component
body: <p>React Slick has got good examples of how to get it going, this one however is in class component, any idea of how to fix the same when making it a functional component</p>
  
  <p><a href="https://react-slick.neostack.com/docs/example/as-nav-for" rel="nofollow noreferrer">https://react-slick.neostack.com/docs/example/as-nav-for</a></p>
  
  <pre><code>import React from "react";
  import Slider from "react-slick";
  
  export default function SyncSlider() {
    const [nav1, setNav1] = React.useState(null)
    const [nav2, setNav2] = React.useState(null)
      let slider1 = []
      let slider2 = []
  
      React.useEffect(() =&gt; {
          setNav1(slider1)
          setNav2(slider2)
      }, [slider1, slider2])
  
      return (
        &lt;div&gt;
          &lt;h2&gt;Slider Syncing (AsNavFor)&lt;/h2&gt;
          &lt;h4&gt;First Slider&lt;/h4&gt;
          &lt;Slider
            asNavFor={nav1}
            ref={slider =&gt; (slider1 = slider)}
          &gt;
            &lt;div&gt;
              &lt;h3&gt;1&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3&gt;2&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3&gt;3&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3&gt;4&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3&gt;5&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3&gt;6&lt;/h3&gt;
            &lt;/div&gt;
          &lt;/Slider&gt;
          &lt;h4&gt;Second Slider&lt;/h4&gt;
          &lt;Slider
            asNavFor={nav2}
            ref={slider =&gt; (slider2 = slider)}
            slidesToShow={3}
            swipeToSlide={true}
            focusOnSelect={true}
          &gt;
            &lt;div&gt;
              &lt;h3&gt;1&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3&gt;2&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3&gt;3&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3&gt;4&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3&gt;5&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3&gt;6&lt;/h3&gt;
            &lt;/div&gt;
          &lt;/Slider&gt;
        &lt;/div&gt;
      );
  
  }
  </code></pre>
  
  <p>Problem looks like is here:</p>
  
  <pre><code>    let slider1 = []
      let slider2 = []
  </code></pre>
  
  <p>The sliders show up but do not sync, any thoughts, inputs, solutions on getting this working?</p>