title: react slick slider convert class component to functional component
body: <p>i am using react slick...and using class component, now i just want to convert class component to functional component....because in these component i need to use another function component...it getting some problem....could any one help on this thing...below the class i have used (renderArrows =) this i thing is getting problem... </p>
  
  <p>this is the link of code sand box : <a href="https://codesandbox.io/s/jovial-smoke-ndzhj" rel="nofollow noreferrer">https://codesandbox.io/s/jovial-smoke-ndzhj</a></p>
  
  <pre><code> import React, {Component } from 'react';
      import { Col, Row } from 'react-grid-system';
      import { ButtonBase } from '@material-ui/core';
      import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
      import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
      import Slider from "react-slick";
  
  
  
      class Example extends Component {
          renderArrows = () =&gt; {
              return (
                  &lt;div className="slider-arrow"&gt;
                      &lt;ButtonBase
                          className="arrow-btn prev"
                          onClick={() =&gt; this.slider.slickPrev()}
                      &gt;
                          &lt;ArrowBackIosIcon /&gt;
                      &lt;/ButtonBase&gt;
                      &lt;ButtonBase
                          className="arrow-btn next"
                          onClick={() =&gt; this.slider.slickNext()}
                      &gt;
                          &lt;ArrowForwardIosIcon /&gt;
                      &lt;/ButtonBase&gt;
                  &lt;/div&gt;
              );
          };
          render() {
              return (
                  &lt;div&gt;
  
                      &lt;Col xl={12} lg={12} md={12} sm={12} xs={12} className="desktop-slider"&gt;
                          &lt;div className="education-level main-boxes boxex-bottom"&gt;
                              &lt;Row className="row"&gt;
                                  &lt;Col xl={4} lg={4} md={4} sm={12} xs={12}&gt;
                                      &lt;div className="index-box-head horizontal-box-head"&gt;
                                          1. Education Level
                                                  &lt;/div&gt;
                                  &lt;/Col&gt;
                                  &lt;Col xl={8} lg={8} md={8} sm={12} xs={12}&gt;
                                      &lt;div style={{ position: "relative" }}&gt;
                                          {this.renderArrows()}
                                          &lt;Slider
                                              ref={c =&gt; (this.slider = c)}
                                              dots={false}
                                              arrows={false}
                                              centerMode={true}
                                              slidesToShow={1}
                                              infinite={false}&gt;
                                                 &lt;li&gt;Home
                                                   &lt;/li&gt;
                                                 &lt;li&gt;About Us
                                                   &lt;/li&gt;
                                                 &lt;li&gt;Gallery
                                                   &lt;/li&gt;
  
  
                                              &lt;/Slider&gt;
  
  
                                      &lt;/div&gt;
                                  &lt;/Col&gt;
                              &lt;/Row&gt;
                          &lt;/div&gt;
                      &lt;/Col&gt;
                  &lt;/div&gt;
              );
          }
      }
  
      export default Example;
  </code></pre>