react-slick: Warning: Unknown props `currentSlide`, `slideCount` on

tag

guys, please use ‘add reaction’ -> thumbs up. Don’t pollute issue threads. Plus, each subscriber keeps getting useless emails on each ‘+1’ comment. Thanks for understanding

The current way to solve this (Typescript example, you can import the CustomArrowProps interface from react-slick):

const NextArrow = ({currentSlide, slideCount, ...props}: CustomArrowProps) => (
  <div {...props}>
    <i className="fas fa-arrow-circle-right"></i>
  </div>
);

And then in the slider: nextArrow={<NextArrow />}

This still throws warnings in the console if you use a custom prev and next arrow.

example code:

        const nextArrow = (
            <div>
                <div role="button" className="slick-control">
                    <i className="icon-arrow"></i>
                </div>
            </div>
        );
        const prevArrow = (
            <div>
                <div role="button" className="slick-control">
                    <i className="icon-arrow"></i>
                </div>
            </div>
        );
        return (
            <Slider className={this.props.className} nextArrow={nextArrow} prevArrow={prevArrow} {...options}>
                {carouselItems}
            </Slider>
        );

Downgrading to 0.14.2 works ;~)

Fixed this issue in 0.14.6

Same for me in version 0.23.1 still getting warnings of currentSlide and slideCount.

I’m seeing the same:

Warning: Unknown props `currentSlide`, `slideCount` on <button> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in button (created by PrevArrow)
    in PrevArrow (created by InnerSlider)
    in div (created by InnerSlider)
    in InnerSlider (created by Slider)
    in Slider (created by Component)
    in div (created by Component)
    in Component (created by Page)
    in div (created by Page)
    in Page

All I did was try to use the example. I’m using server rendering although by reading this comment list it looks like the issue is known and has a PR fix waiting.

btw, I’m having this error with buttons too. Warning: Unknown props currentSlide, slideCount on <button> tag

What’s the point with this fix? It changes your component style if you give the className and the style prop to the custom arrow. I find it really inconvenient. If I want a custom component, it’s exactly to avoid the default styling.

+1

I think this issue should be reopened. Passing custom icon will always throw an error

Still happening to me in version 0.14.7.

I fixed it by carefully handling the props on the div (only passing it the props that it can receive) used to render the button and worked like a charm.

This way:

class CarouselArrow extends Component {

  render() {
    let style = {
      ...this.props.style,
      display: 'block',
      background: '#d8e4e8',
      'paddingLeft': '6px',
    };

    return (
      <div className={this.props.className}
              onClick={this.props.onClick}
              style={style}>
      </div>
    );
  }
}

I created this follow-up ticket: https://github.com/akiran/react-slick/issues/671

+1 rolled back to 0.14.5, works fine

+1

+1

I don’t think the problem is with spread at all… HTML Elements shouldn’t have these custom props. From the docs:

You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute as described on MDN.

@maslianok, add “transform-object-rest-spread” plugin to .babelrc file

getting this error with latest version ,was there a fix?

I’ve updated the PR. rest operator is replaced with Object.assign.

transform-object-rest-spread

This plugin allows Babel to transform rest properties for object destructuring assignment and spread properties for object literals.

According to the description, the plugin is not intended to solve react unkown props problem.

@aiduryagin it doesn’t help

@cheeZery If its so simple, feel free to open a PR. I’m sure they would appreciate the help.

Getting the same issue, please let me know once it gets fixed. (Subscribed)

It also repro in version 0.23.1

@shadrech I also still get the same warning. And as far as I can see the problem was never fixed. In https://github.com/akiran/react-slick/blame/master/src/arrows.js#L73 the given nextArrow and prevArrow components are cloned with the customProps object, which contain the props in question, currentSlide + slideCount. So everytime you want to use a custom arrow, react-slick will try to add currentSlide and slideCount to that component, may it be a button, or a div. And these non-standard props are obviously not known, hence the warning. Please correct me if I’m wrong! 😃