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

[matiasherranz]

Version: 0.14.7
Related ticket: https://github.com/akiran/react-slick/issues/623

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)

This happens when using the official example for custom arrows: link

Even though the original ticket was for veresion 0.14.6, this is 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>
    );
  }
}

[akiran]

Thanks @matiasherranz
Can you open a PR with this example change

[PetrochukM]

+1

[matiasherranz]

PR with my fix: https://github.com/akiran/react-slick/pull/682

[yn5]

+1

[OscarBarrett]

If you're using lodash you can also omit those two props.

return (
  <div {..._.omit(props, ['currentSlide', 'slideCount'])}>
  </div>
);

Or, with es6:

const { currentSlide, slideCount, ...filteredProps } = props;
return (
  <div {...filteredProps}>
  </div>
);

[akiran]

Fixed this in master