react-slick: Cannot render dynamic slides

@NeroCor @bdesilva-appneta I had this issue as well, and fixed it by wrapping the React Component with div e.g.:

<Slider {...settings}> {this.items.map(item => ( <div><CarouselItem item={item}></CarouselItem><div> ))} </Slider>

data-index, class and style will show up on that div. Slides are still dynamic, does this suffice?

So I ran into the same problem and just found this solution. I am not certain whether it has been properly covered above. The essence of it is that if the Slider does not have slides to initialize on i.e. maybe your slides are dynamically added, or perhaps are stored in some variable that has not been initialized yet or as in my case the slide data is passed in as props and arrives asynchronously then you may see this error b/c there is nothing for the Slider to process. I think this initial error will prevent the relevant code from running when content does arrive.

My solution is to have a check to see if the array I am using to render my slides has length. If so I render the Slider - if not I don’t. Once I did this I no longer saw the error and my content began to render properly as slides. Here is what I did:

{slides.length && <Slider {...settings}> //render your slides from the array }

I think it would be a good idea for react-slick to catch this empty content and simply not attempt to process it - so then we wouldn’t see the error.

Not sure how it works for everyone, I did this:

render() {
  let imgTpl = (images || []).map((image, index) => {
     return (
     <div key={image.Id} >
        <img src={image.url}  /></div>
     );
  });
}

return(
  <Slider {...settings}>
    { imgTpl }
   </Slider>
)

There is a div around the image items but it still does not work.

You have to either wrap your component with div, or pass props to root element in you custom component

Example

SlideComponet = React.createClass({
   render: function() {
     return <div {...this.props}><img /></div>
  }
})

@scottpatrickwright has it, it’s even better to check if the length is more than 0, or whatever number of slides you’d like to have before loading, for example:

{slides.length > 0 && <Slider {...settings}> //render your slides from the array }

Check out the official docs:

https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

See answer of @josephktcheung. Wrapping the Component in a <div> works for me.

That works, but I needed my own special class on a component. This is my approach but it doesn’t look too clean with that extra className on the component instead of having it on the div inside the render() of the component.
I appreciate any feedback on this.

i dont now

I hope it help for everyone and slider Initializate correct ( I add check for props empty or not empty)

`/**

• Created by maximvlasenko on 1/19/17. */

import React from ‘react’; import axios from ‘axios’; import Slider from ‘react-slick’;

import { Navigation, Link, Router, Route, IndexRoute, browserHistory } from ‘react-router’

var MenuItem = React.createClass({ render: function(){ return ( <li className={this.props.menu.href === browserHistory.getCurrentLocation().pathname ? “active td relative” : “td relative”}> <Link to={this.props.menu.href} title={this.props.menu.title}> {this.props.menu.title} </Link> ); } });

var GalleryItemImage = React.createClass({ render: function() { var image = this.props.photo.image; var style = { backgroundImage: url(${image}) } return ( ) } });

var GalleryItem = React.createClass({ render: function(){ console.log(this.props.galleries); var galleryItemImage = this.props.galleries.map(function(gallery, i, galleries){ return <GalleryItemImage photo={gallery} count={i} /> }); return ( <div key={this.props.count}> {galleryItemImage} </div> ); } });

var GallerySlider = React.createClass({ render: function(){ /var galleryItem = this.props.galleries.map(function(gallery, i){ return <GalleryItem galleries={gallery} count={i} /> });/ var settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1,

    };
    console.log(this.props);
    //<div id="pager" className="slider-pager flex img center absolute"></div>
    return (
        <div className="inside absolute">
            <div className="slider-box img absolute">
                {this.props.galleries.length &&
                    <Slider {...settings}>
                        {this.props.galleries.map(function (gallery, i) {
                            return <div><GalleryItem galleries={gallery} count={i}/></div>
                        })}
                    </Slider>
                }
            </div>
        </div>
    );
}

});

var GalleryInformation = React.createClass({ getInitialState: function() { return { gallery: [], menu: [] } }, getDataFromServer: function(){ var _this = this; this.serverRequest = axios.get(‘/api/sub/’ + browserHistory.getCurrentLocation().pathname) .then((res) => { console.log(res); _this.setState({ gallery: res.data.photos, menu: res.data.menu }); }); }, componentWillReceiveProps: function (nextProps) { this.getDataFromServer(); }, componentDidMount: function() { this.getDataFromServer();

},
chunks: function(arr, size) {
    if (!Array.isArray(arr)) {
        throw new TypeError('Input should be Array');
    }
    if (typeof size !== 'number') {
        throw new TypeError('Size should be a Number');
    }
    var result = [];
    for (var i = 0; i < arr.length; i += size) {
        result.push(arr.slice(i, size + i));
    }
    return result;
},
render: function() {
    var galleries = this.chunks(this.state.gallery, 8);

    var menuItem = this.state.menu.map(function(menu, i){
        return <MenuItem menu={menu} />
    });
    return (
        <div>
            <nav className="bottom-nav absolute table nobr">
                <ul className="tr">
                    {menuItem}
                </ul>
            </nav>
            <GallerySlider galleries={galleries} />
        </div>
    )
}

});

export default GalleryInformation;

`