title: React-slick not rendering slides
body: <p>I'm using a plugin called react-slick for a carousel. I have tried to implement a carousel which has dynamic slides, however when it renders it doesn't seem to initialise each of the slides. Is it because the slider has initialised before the children?</p>
  
  <p>this.extractData basically gets json object</p>
  
  <pre><code>createCarousel = () =&gt; {
      let data = this.extractData();
      const settings = {
          dots: true,
          infinite: true,
          speed: 500,
          slidesToShow: 1,
          slidesToScroll: 1
      };
      return(
          &lt;Slider {...settings}&gt;
              {data.map(function(object, i){
                  return &lt;testLayout data={object} key={i} /&gt;;
              })}
          &lt;/Slider&gt;
      );
  };
  
  render() {
  
      return (
          &lt;div className="difference"&gt;
              {this.createCarousel()}
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>testLayout</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class testLayout extends Component {
  
  render() {
      let item = this.props.data.items;
      return (
          &lt;div className="slide"&gt;
              &lt;img src={item.imgUrl} alt=""/&gt;
              &lt;p&gt;{item.text}&lt;/p&gt;
          &lt;/div&gt;
      );
  }
  }
  
  export default testLayout;
  </code></pre>
  
  <p>any help would be much appreciated.
  Thanks </p>
  
  <p>UPDATE - found fix <a href="https://github.com/akiran/react-slick/issues/328" rel="nofollow noreferrer">https://github.com/akiran/react-slick/issues/328</a></p>