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

Created on 18 Apr 2018 · 10Comments · Source: akiran/react-slick

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

question

Source

kirill-konshin

👍2

Most helpful comment

You may use this as workaround:

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

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

kirill-konshin on 19 May 2018

👍29 🚀4 😄3

All 10 comments

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.

laveesingh on 19 Apr 2018

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.

kirill-konshin on 19 Apr 2018

👍6

rickyliu93 on 20 Apr 2018

Any progress?

kirill-konshin on 3 May 2018

👍1

would be great to solve this.

Pushplaybang on 6 May 2018

You may use this as workaround:

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

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

kirill-konshin on 19 May 2018

👍29 🚀4 😄3

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

akashmdkml on 6 Dec 2018

<SlickButtonFix>
            <IconButton>
                <ChevronLeft />
            </IconButton>
        </SlickButtonFix>

Thank you, man! you saved my life!

bohehe on 14 Aug 2020

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