react-slick: Cannot render dynamic slides
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 <Slider>body</Slider>, 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.
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 18
- Comments: 18 (1 by maintainers)
Commits related to this issue
- fix: React-Slick slider not re-render when initial children's length is 0 (https://github.com/akiran/react-slick/issues/328) — committed to ryuken73/Melon-Clone by ryuken73 3 years ago
@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
andstyle
will show up on thatdiv
. 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:
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
@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 thediv
inside therender()
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)
`/**
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,
});
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();
});
export default GalleryInformation;
`