Warning: React does not recognize the `slideCount` prop on a DOM element.

[kirill-konshin]

Because of this line https://github.com/akiran/react-slick/blob/master/src/arrows.js#L35 I get errors with React 16.

What is the purpose of this? How it will help with a config like this:

    nextArrow: (
        <span>
            <IconButton>
                <FA icon={faChevronRight} />
            </IconButton>
        </span>
    ),

[laveesingh]

Don't pass down all the props that you receive for custom arrows.

nextArrow: ({ firstProp, secondProps, ...otherProps }) => (
  <element {...props that you want} />
)

Something like this should work.

[kirill-konshin]

It did not work :) I tried like this:

nextArrow: () => (<span>...</span>);

The problem is that lib expects nextArrow to be an Element, and it clones it. So function does not work and lead to error.

[rickyliu93]

+1

[kirill-konshin]

Any progress?

[Pushplaybang]

would be great to solve this.

[kirill-konshin]

You may use this as workaround:

const SlickButtonFix = ({currentSlide, slideCount, children, ...props}) => (
    <span {...props}>{children}</span>
);

const SETTINGS = {
    prevArrow: (
        <SlickButtonFix>
            <IconButton>
                <ChevronLeft />
            </IconButton>
        </SlickButtonFix>
    )
};

[akashmdkml]

@kirill-konshin thanks this worked well 👏, react-slick custom arrows help to make arrow accessibility. https://codesandbox.io/s/myqq0yz54y

[codfish]

Update, needed to do the following (version 0.27.13) to avoid the default button showing up.

(add some css to hide it)

body .slick-prev::before,
body .slick-next::before {
  display: none;
}

const SlickButtonFix = ({ currentSlide, slideCount, children, ...props }) => (
  <span {...props}>{children}</span>
);

prevArrow={
  <SlickButtonFix>
    <img src="/chevron-left.svg" alt="previous quote" width="12" height="20" />
  </SlickButtonFix>
}
nextArrow={
  <SlickButtonFix>
    <img src="/chevron-right.svg" alt="next quote" width="12" height="20" />
  </SlickButtonFix>
}

---

@bohehe @kirill-konshin I'm running into seeing the button appear along my custom arrow with this fix, did you run into this at all?

const SlickButtonFix = ({ currentSlide, slideCount, children, ...props }) => (
  <span {...props}>{children}</span>
);

prevArrow={
  <SlickButtonFix>
    <img src="/chevron-left.svg" alt="previous quote" width="12" height="20" />
  </SlickButtonFix>
}
nextArrow={
  <SlickButtonFix>
    <img src="/chevron-right.svg" alt="next quote" width="12" height="20" />
  </SlickButtonFix>
}

When i do the following I don't see the issue:

prevArrow={<img src="/chevron-left.svg" alt="previous quote" width="12" height="20" />}
nextArrow={<img src="/chevron-right.svg" alt="next quote" width="12" height="20" />}

[minbelapps]

Why is it closed? It's a workaround, but not the solution. Why the library is injected props directly into the function's/component's output?

[ray-silicon-rhino]

This doesn't work with Next.js 12 and typescript as slickButtonFix doesn't know what it should be getting as propperties. dissapointing to see that this issue has not been resolved, I will look for an alternative package

[xiaojiudev]

This doesn't work with Next.js 12 and typescript as slickButtonFix doesn't know what it should be getting as propperties. dissapointing to see that this issue has not been resolved, I will look for an alternative package

Nextjs13, you just do the same above, then adding 'use client' on the top, there's no more error on client(i still don't know why it has an error if using server)

[shakilcse25]

can anyone give me the typescript solution?

[kajikentaro]

If you use typescript, following example worked for me.

    const SlickButtonFix = (
      props: {
        children: JSX.Element;
        slideCount?: number;
        currentSlide?: number;
      }
    ) => {
      const { children, currentSlide, slideCount, ...others } = props;
      return (
        <span {...others}>
          {children}
        </span>
      );
    };

    return (
      <Slider
        prevArrow={
          <SlickButtonFix>
            <div>prev</div>
          </SlickButtonFix>
        }
        nextArrow={
          <SlickButtonFix>
            <div>next</div>
          </SlickButtonFix>
        }
      >
        {/* your components */}
      </Slider>
    );

[acomanescu]

I'm facing this issue. I've tried the fix, but it doesn't seem to work.

[AdamJednacz]

const settings = {
    dots: true,
    arrows: true,
    infinite: true,
    speed: 600,
    slidesToShow: 1,
    slidesToScroll: 1,
    prevArrow:<SlickButtonFix><FontAwesomeIcon   icon={faAngleLeft}/></SlickButtonFix>,
    nextArrow: <SlickButtonFix><FontAwesomeIcon  icon={faAngleRight}/></SlickButtonFix>,
    initialSlide: 0,
    autoplay: true,
    autoplaySpeed: 10000,
    cssEase: "linear",
    responsive: [
        {
            breakpoint: 768, 
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: false, 
                dots:false
            }
        },
        {
            breakpoint: 480, 
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: true, 
                dots:false
            }
        }
    ]
};I pass it like this but the css doesn't work