React-slick: Warning: Unknown props `currentSlide`, `slideCount` on <div> tag

[maslianok]

version 0.14.6

Error

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

The bug was introduced in this commit https://github.com/akiran/react-slick/commit/436e3052855613a49478382b51743f8bbef9bf15

You added 2 custom props. But 10 lines below you use this object as props for the div element

[aduryagin]

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

[intpp]

@aiduryagin it doesn't help

[aduryagin]

@intpp plugin "transform-object-rest-spread" for transpilation his source code into dist and lib folders :)

[velidan]

It doesn't help. I also have the same issue
Unknown props currentSlide, slideCount on tag. and I added this plugin but it didn't fix anything, unfortunately.

[ystarlongzi]

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.

[maslianok]

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

[gilbarbara]

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.

[gilbarbara]

btw, I'm having this error with buttons too.
Warning: Unknown propscurrentSlide,slideCounton <button> tag

[aksel]

I, too, am getting this with buttons at the moment

[gilbarbara]

These HTML elements need to be wrapped in a React Component that handle the props and just render the plain div/buttons.

[duxiaodi]

I also encountered this problem,is there an effective solution

[dafydd61]

I'm in the same boat. Has anybody found a solution?

[aksel]

Downgrading to 0.14.2 works ;~)

[dafydd61]

Thanks @torgard

[bel0v]

@akiran any reviews/approval on the #624 fix yet?

[cristianst]

Im having the same issue. Any workaround until a fix gets released?

[stephen-last]

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.

[matt-iakhno]

+1 still seeing this issue.

[atleyvirdee]

+1 Having same issue!

[iqbalmineraltown]

Wasn't this caused because these props implemented in these lines?

default props:
https://github.com/akiran/react-slick/blob/master/src/arrows.js#L26
https://github.com/akiran/react-slick/blob/master/src/arrows.js#L62

and referenced props:
https://github.com/akiran/react-slick/blob/master/src/inner-slider.js#L173

which is not standard props for simple <button> element

CMIIW

[aksel]

Seems like it, @iqbalmineraltown

[johnnyghost]

+1

[eduardoleal]

+1

[cropcrop]

+1

[Frit]

+1
rolled back to 0.14.5, works fine

[bel0v]

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

[akiran]

Fixed this issue in 0.14.6

[ryank311]

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

[matiasherranz]

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

[shadrech]

Issue been closed but am I the only one still getting this error?
Warning: Unknown props `currentSlide`, `slideCount` on <div> tag
I'm using latest react-slick (v0.15.4). Its only a warning, carousel works perfectly but really need to stop seeing this bug! Any solutions yet?

[cheeZery]

@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! :-)

[reintroducing]

FYI, in looking at the examples, i fixed this by following that. I made a custom arrow component and only took in what i needed as far as props and applied accordingly. Example:

import React from 'react';
import PropTypes from 'prop-types';
import Button from '../Button/Button';
import Icon from '../Icon/Icon';

const CarouselArrow = ({
    direction,
    className,
    onClick
}) => {
    return (
        <Button
            className={className}
            onClick={onClick}
        >
            <Icon
                name={`chevron-${direction}`}
            />
            <span>{(direction === 'left') ? 'Previous Slide' : 'Next Slide'}</span>
        </Button>
    );
};

CarouselArrow.propTypes = {
    className: PropTypes.string,
    direction: PropTypes.oneOf(['left', 'right']).isRequired,
    onClick: PropTypes.func
};

export default CarouselArrow;

[novialim]

Went with the custom component route too. Am using material ui logos:

import KeyboardArrowLeft from 'material-ui/svg-icons/hardware/keyboard-arrow-left';

export default
class CarouselArrowLeft extends React.Component {

    render() {

        return (
            <div>
                <KeyboardArrowLeft className="slick-prev" onClick={this.props.onClick}/>
            </div>
        );
    };
}

Do the same for right arrow.

import React, { Component } from 'react';
import Slider from 'react-slick';
import CarouselArrowLeft from "../Images/CarouselArrowLeft.js.jsx";
import CarouselArrowRight from "../Images/CarouselArrowRight.js.jsx";

export default class SimpleSlider extends Component {

    render() {

        const ArrowLeft = <CarouselArrowLeft/>;
        const ArrowRight = <CarouselArrowRight/>;

        const settings = {
            dots: true,
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 4500
        };
        return (
            <div>
                <Slider {...settings} prevArrow={ArrowLeft} nextArrow={ArrowRight}>
                    {
                        feedbacks.map((feedbacks,i) => (
                            <div key={i}>
                                <div className="review-stars"><FiveStars color="yellow"/></div>
                                <div className="review-slider-content">
                                    <h3>{feedbacks.feedback}</h3>
                                    <h4>{feedbacks.reviewer}</h4>

                                </div>
                            </div>
                        ))
                    }
                </Slider>
            </div>
        );
    }
}

[HeratPatel1]

It also repro in version 0.23.1

[waheed25]

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

[msreekm]

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

[rajendraarora16]

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

[Shaddix]

This is actually a duplicate of #1195 (and it has a workaround)

[cheeZery]

Yeah, you could use a render function instead of JSX, but the clear bug in the code is still there.
I don't understand, why @akiran even closes #1195 instead of fixing the bug. Would a PR be welcome to fix the simple issue or is the solution not as simple as it seems? Imo you just have to stop spreading customProps in this.props.prevArrow in https://github.com/akiran/react-slick/blob/master/src/arrows.js.

[aksel]

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

[yousifalraheem]

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


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.


[akimthedream]

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

[tienpd]

Thanks @akimthedream i've resolved issue

[RemyMachado]

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.