react slick slider convert class component to functional component - reactjs

Question

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...
this is the link of code sand box : https://codesandbox.io/s/jovial-smoke-ndzhj
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 = () => {
return (
<div className="slider-arrow">
<ButtonBase
className="arrow-btn prev"
onClick={() => this.slider.slickPrev()}
>
<ArrowBackIosIcon />
</ButtonBase>
<ButtonBase
className="arrow-btn next"
onClick={() => this.slider.slickNext()}
>
<ArrowForwardIosIcon />
</ButtonBase>
</div>
);
};
render() {
return (
<div>
<Col xl={12} lg={12} md={12} sm={12} xs={12} className="desktop-slider">
<div className="education-level main-boxes boxex-bottom">
<Row className="row">
<Col xl={4} lg={4} md={4} sm={12} xs={12}>
<div className="index-box-head horizontal-box-head">
1. Education Level
</div>
</Col>
<Col xl={8} lg={8} md={8} sm={12} xs={12}>
<div style={{ position: "relative" }}>
{this.renderArrows()}
<Slider
ref={c => (this.slider = c)}
dots={false}
arrows={false}
centerMode={true}
slidesToShow={1}
infinite={false}>
<li>Home
</li>
<li>About Us
</li>
<li>Gallery
</li>
</Slider>
</div>
</Col>
</Row>
</div>
</Col>
</div>
);
}
}
export default Example;

Answer 1

This can be the best answer
I tried and made this work with you sample
Check please
https://codesandbox.io/s/infallible-turing-wgvrb?file=/src/App.js
import React, { useRef } 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";
const Example = () => {
const customSlider = useRef();
const renderArrows = () => {
return (
<div className="slider-arrow">
<ButtonBase
className="arrow-btn prev"
onClick={() => customSlider.current.slickPrev()}
>
<ArrowBackIosIcon />
</ButtonBase>
<ButtonBase
className="arrow-btn next"
onClick={() => customSlider.current.slickNext()}
>
<ArrowForwardIosIcon />
</ButtonBase>
</div>
);
};
return (
<div>
<Col xl={12} lg={12} md={12} sm={12} xs={12} className="desktop-slider">
<div className="education-level main-boxes boxex-bottom">
<Row className="row">
<Col xl={4} lg={4} md={4} sm={12} xs={12}>
<div className="index-box-head horizontal-box-head">
1. Education Level
</div>
</Col>
<Col xl={8} lg={8} md={8} sm={12} xs={12}>
<div style={{ position: "relative" }}>
{renderArrows()}
<Slider
ref={slider => (customSlider.current = slider)}
dots={false}
arrows={false}
centerMode={true}
slidesToShow={1}
infinite={false}
>
<li>Home</li>
<li>About Us</li>
<li>Gallery</li>
</Slider>
</div>
</Col>
</Row>
</div>
</Col>
</div>
);
};
export default Example;

Answer 2

class component to functional component:
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'
const renderArrows = () => {
return (
<div className="slider-arrow">
<ButtonBase
className="arrow-btn prev"
onClick={() => this.slider.slickPrev()}
>
<ArrowBackIosIcon />
</ButtonBase>
<ButtonBase
className="arrow-btn next"
onClick={() => this.slider.slickNext()}
>
<ArrowForwardIosIcon />
</ButtonBase>
</div>
)
}
const Example = () => {
return (
<div>
<Col xl={12} lg={12} md={12} sm={12} xs={12} className="desktop-slider">
<div className="education-level main-boxes boxex-bottom">
<Row className="row">
<Col xl={4} lg={4} md={4} sm={12} xs={12}>
<div className="index-box-head horizontal-box-head">
1. Education Level
</div>
</Col>
<Col xl={8} lg={8} md={8} sm={12} xs={12}>
<div style={{ position: 'relative' }}>
{renderArrows()}
<Slider
ref={c => (this.slider = c)}
dots={false}
arrows={false}
centerMode={true}
slidesToShow={1}
infinite={false}
>
<li>Home</li>
<li>About Us</li>
<li>Gallery</li>
</Slider>
</div>
</Col>
</Row>
</div>
</Col>
</div>
)
}
export default Example
One more thing, I don't seem to get from where this.slider.slickNext() came from. I think it would be this.Slider.slickPrev().
If I'm right, then for functional component, change it to Slider.slickPrev()