React-slick not working on first render

Question

I tried react-slick with dynamic children but it don't work as it should be, the height on first render was coming as some 176px but If I try to resize the browser then it works and the height changes to 514px. I thought may be I force my component to render one more time but it didn't work. I tried to replicate the issue but getting some other issue there.

Take a look at the fiddle

 var Item = React.createClass({
 render: function() {
 return ( < div > < p > kitten pic < /p><br/ > < img src ='http://placekitten.com/g/400/200' / > < /div>)
 }
 });

var ReactSlickDemo = React.createClass({
render: function() {
var settings = {
  dots: false,
  vertical: true,
  autoplay: true,
  autoplaySpeed: 6000,
  arrows: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  touchMove: false,
  swipeToSlide: false,
  swipe: false
}
return ( < div className = 'container' >
  < Slider {...settings
  } >
  < Item / >
  < Item / >
  < Item / >
  < /Slider> < /div>
 );
 }
});

 ReactDOM.render( < ReactSlickDemo / > ,
 document.getElementById('container')
  );

Answer 1

You have added react component <Item> in <Slider> component. So, you need to wrap <Item> inside <div> and that should work.

 <div>
      < Item / >
      < Item / >
      < Item / >
 </div>

Please find details on below link:

https://github.com/akiran/react-slick/issues/328