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

You may use this as workaround:

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

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

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?

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.

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>
    );

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" />}

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

Any progress?