React-slick: Cannot render dynamic slides

[bdesilva-appneta]

Hi,

I've tried to render dynamic slides by doing this:

const slides = this.renderSlides(this.props.metadata);
return ( <Slider {...settings}> { slides } </Slider>);
renderSlides(meta) { return meta.map((data) => ( <PreviewSlide key={data.step} timestamp={data.timestamp} screenshot={data.screenshot} /> )); }

However, the slides don't render, however when I hardcode divs into the body, that works.

Can you please let me know if this is possible because I need to render my own React Slide components dynamically into the carousel.

Thanks,
Ben.

[and-who]

Same for me,
I can not put other React Components in the Slider e.g.:

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

They get rendered, but missing attributes like: data-index, class and style

[josephktcheung]

@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?

[manodupont]

No answers yet ? Looking for that too...

[and-who]

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

[akiran]

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>
  }
})

[escapedcat]

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.

[jgliner]

@josephktcheung - Perfect. Thanks! This was particularly frustrating when dealing with Server-Side/Universal rendering.

[polyma]

This hack works for me, thanks!

[foodaka]

I am also having this issue, and i tried wrapping it in a div. is there any sample code of this anywhere?

[sayayinR]

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.

[flyupstudio]

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 (

"active td relative" : "td relative"}>
{this.props.menu.title}

);
}
});

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

var GalleryItem = React.createClass({
render: function(){
console.log(this.props.galleries);
var galleryItemImage = this.props.galleries.map(function(gallery, i, galleries){
return
});
return (

{galleryItemImage}

);
}
});

var GallerySlider = React.createClass({
render: function(){
/var galleryItem = this.props.galleries.map(function(gallery, i){
return
});/
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;

`

[scottpatrickwright]

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.

[joperron]

@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

[davidshare]

I have issues with the images being stacked vertically instead of creating a slide I have tried all i can and seached but no solution. really need help

const generateSlides = ({slides}) => {
if(slides){
return (

{slides.map((item)=>

)}

)
}
}

const Featured = (props) => {
return(

{generateSlides(props)}

)
}

const SlideElement = ({item}) =>{
return(

url(/images/covers/${item.cover})}}>

{item.topic}

{item.title}

)
}

[scottpatrickwright]

Just a shot in the dark but it sounds as if the problem might be with the CSS? That’s what hides the images which are not being viewed. The natural rendering of the images in the browser would be stacked. Use the inspector to see how the code is actually being rendered.

[khaterehvalipoori]

i dont now

[PashaSchool]

should work with that solution

* {
    min-height: 0;
    min-width: 0;
}