React-slick: customArrow meet a problem

[walker-jiang]

use this:
var settings = {
dots: false,
infinite: true,
speed: 500,
slidesToShow: 6,
slidesToScroll: 1,
nextArrow: ,
prevArrow:
};
get this:
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.
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.

That's not a big problem, but hope to solve.thanks

[paulcredmond]

It would be more helpful to have a JSFiddle or CodePen to demo your issue.

Here's an example of using a custom arrow where you have access to currentSlideand slideCount.

In your settings:

nextArrow: <NextArrow />,

Your arrow function:

// Next arrow
function NextArrow(props) {
   const {currentSlide, slideCount, className, onClick} = props;

   return (
      <div onClick={onClick}>
         <button className={"slick-arrow slick-next"} />
      </div>
   );

[alyrik]

@walker-jiang, only components are allowed to be a custom arrow. You can't provide plain JSX tags to prevArrow and nextArrow props.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.