React-slick: React component in react slick

[ghazaltaimur13]

When i pass react component in react slick slider but it does not show my component in slider. Is there any way to pass my react component . As i pass my grid component in slider. But nothing show.

[nraval1729]

Without seeing your code, I am not sure what exactly the issue is, but I might have a hunch.
Let's say this is your parent component, call it Carousel.

export default class Carousel extends Component {
  render() {
    return (
      <div className="Carousel">
        <Slider>
          <CarouselItem/>
          <CarouselItem/>
          <CarouselItem/>
        </Slider>
      </div>
    )
  }
}

Then in your CarouselItem component, you need to make sure to pass in a destructured this.props to your element like so:

export default class CarouselItem extends Component {
  render() {
    return (
     <div {...this.props}>
       <h1>Hello!</h1>
     </div>
    )
  }
}

This funny ...this.props operator basically gets all the key-values from this.props and we now pass it to the div. This is important because there are many react-slick specific props passed in and our custom slides also require them. Hope this helps.

[akiran]

You can check this example https://github.com/akiran/react-slick/blob/master/examples/CustomSlides.js

you can filter this.props before passing to div if necessary