title: Accessing component methods with Hooks
body: <p>I am trying to make a simple carousel by following this documentation <a href="https://ant.design/components/carousel/" rel="nofollow noreferrer">Carousel</a> </p>
  
  <p>Working <a href="https://react-slick.neostack.com/docs/example/previous-next-methods/" rel="nofollow noreferrer">example</a>  </p>
  
  <p>how can I translate above to use functional components/hooks.</p>
  
  <p>I have been trying to bind next() within an onClick Button however I can't seem to get it to work. How can I correctly access the next method and bind it within my button?  </p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;Carousel ref={c =&gt; (this.slider = c)} &gt;
    &lt;div&gt;
      &lt;h3&gt;&lt;Button onClick={() =&gt; this.carousel.next()}&gt;1&lt;/Button&gt;&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;h3&gt;&lt;Button onClick={() =&gt; this.carousel.prev()}&gt;2&lt;/Button&gt;&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;/Carousel&gt;
  </code></pre>