React-slick hide pagination dots on last slide - reactjs

Question

I am using React-Slick component in my project. I have to show pagination dots on all the slides except the last slide. I want to hide those pagination dots for last slide.
I have checked that afterChange function is available as a callback. This can be used to customise the slider css in jQuery, but how can I use this function to hide the pagination dots in React application?
import Slider from 'react-slick';
export default class Carousal extends Component {
render() {
let settings = {
accessibility: true,
dots: true,
infinite: false,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true,
centerPadding: '10px',
responsive: [{
breakpoint: 768,
settings: {
swipeToSlide: true
}
}],
afterChange: function (currentSlide) {
console.log(currentSlide);
}
};
return (
<Slider {...settings} >
{slides}
</Slider>
);
}

Answer 1

On Components construction set state value for dots prop for the Slider component. Then set it to false when you don't want to show it.
export default class Carousal extends Component {
constructor(props) {
super(props);
this.state = {
dots: true
};
}
render() {
let settings = {
accessibility: true,
dots: this.state.dots,
infinite: false,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true,
centerPadding: '10px',
responsive: [{
breakpoint: 768,
settings: {
swipeToSlide: true
}
}],
afterChange: (currentSlide) => {
console.log(currentSlide);
this.setState({
dots: (currentSlide !== 'yourDesiredSlide')
});
}
};
return (
<Slider {...settings} >
{slides}
</Slider>
);
}