How to solve Warning: React does not recognize the `currentSlide`, ` slideCount` prop on a DOM element

Question

I am using "react-slick" for image slider in next.js project. While using this, console shows this warnings for both 'currentSlide' and 'slideCount' prop on a DOM element.

Warning: React does not recognize the `currentSlide` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `currentslide` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in svg (created by ForwardRef(SvgIcon))
in ForwardRef(SvgIcon) (created by WithStyles(ForwardRef(SvgIcon)))
in WithStyles(ForwardRef(SvgIcon)) (created by ForwardRef)
in ForwardRef
in ForwardRef (at HomeProductsSegment.js:560)
in PrevArrow (created by InnerSlider)
in div (created by InnerSlider)
in InnerSlider (created by Slider)
in Slider (at HomeProductsSegment.js:641)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at HomeProductsSegment.js:631)
in section (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at HomeProductsSegment.js:630)
in HomeProductsSegment (created by WithStyles(HomeProductsSegment))
in WithStyles(HomeProductsSegment) (at pages/index.js:417)
in App (at pages/index.js:409)
in Home (created by WithStyles(Home))
in WithStyles(Home) (at _app.tsx:18)
in MyApp
in ErrorBoundary (created by ReactDevOverlay)
in ReactDevOverlay (created by Container)
in Container (created by AppContainer)
in AppContainer
in Root

Warning: React does not recognize the `slideCount` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `slidecount` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in svg (created by ForwardRef(SvgIcon))
in ForwardRef(SvgIcon) (created by WithStyles(ForwardRef(SvgIcon)))
in WithStyles(ForwardRef(SvgIcon)) (created by ForwardRef)
in ForwardRef
in ForwardRef (at HomeProductsSegment.js:560)
in PrevArrow (created by InnerSlider)
in div (created by InnerSlider)
in InnerSlider (created by Slider)
in Slider (at HomeProductsSegment.js:641)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at HomeProductsSegment.js:631)
in section (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at HomeProductsSegment.js:630)
in HomeProductsSegment (created by WithStyles(HomeProductsSegment))
in WithStyles(HomeProductsSegment) (at pages/index.js:417)
in App (at pages/index.js:409)
in Home (created by WithStyles(Home))
in WithStyles(Home) (at _app.tsx:18)
in MyApp
in ErrorBoundary (created by ReactDevOverlay)
in ReactDevOverlay (created by Container)
in Container (created by AppContainer)
in AppContainer
in Root

also, found this issue in https://github.com/akiran/react-slick/issues/623

here is the sample code I tried:

import React from "react";
import Slider from "react-slick";
 
class SimpleSlider extends React.Component {
  render() {
    var settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <Slider {...settings}>
        <div>
          <h3>1</h3>
        </div>
        <div>
          <h3>2</h3>
        </div>
        <div>
          <h3>3</h3>
        </div>
        <div>
          <h3>4</h3>
        </div>
        <div>
          <h3>5</h3>
        </div>
        <div>
          <h3>6</h3>
        </div>
      </Slider>
    );
  }
}

react-slick: npm react-slick

Answer 1

const SlickArrowLeft = ({ currentSlide, slideCount, ...props }) => (
  <button
    {...props}
    className={
      "slick-prev slick-arrow" +
      (currentSlide === 0 ? " slick-disabled" : "")
    }
    aria-hidden="true"
    aria-disabled={currentSlide === 0 ? true : false}
    type="button"
  >
    Previous
  </button>
);
const SlickArrowRight = ({ currentSlide, slideCount, ...props }) => (
  <button
    {...props}
    className={
      "slick-next slick-arrow" +
      (currentSlide === slideCount - 1 ? " slick-disabled" : "")
    }
    aria-hidden="true"
    aria-disabled={currentSlide === slideCount - 1 ? true : false}
    type="button"
  >
    Next
  </button>
);

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  prevArrow: <SlickArrowLeft />,
  nextArrow: <SlickArrowRight />,
};

Make custom prevArrow and nextArrow

https://github.com/akiran/react-slick/issues/623#issuecomment-629764816