Correct spacing not added when child elements are React Components about react-slick

[mklb]

@yuzeh thanks for your fix... tried hours to get this working ;D

[akiran]

Both should work.
Let me test it

[yuzeh]

So it looks like css width is not getting assigned to the items if the root element of the item is a React component.

Current workaround is wrapping the component in a div.

[akiran]

@yuzeh

children of slider component to adjust styles and class names based on intreractions
https://github.com/akiran/react-slick/blob/master/lib/inner-slider.jsx#L57-62

In this case, style and classnames are applied to react components instead of html elements.

Your work around is one way to fix this.

Other way would be to pass props to div inside component (I haven't tested it though)

var Bar = React.createClass({
    render: function() {
      return (
          <div {...this.props}>
            <img src={this.props.imageUrl} />
          </div>
      );
    },
  });

I will see if there is any better way to fix this issue.

[gus4no]

similar issue here but it's just a regular div, not a component the responsive settings doesn't seem to work until I resize the window, demo works though, if I copy exactly what's on the demo to my render function it works ok :/

edit:

Seems like I found the issue, this.state.subcategories is something that I get with an ajax call if I hardcode the json object directly it works ok.

render: function() {
var slickSettings = {
    dots: true,
    infinite: false,
    adaptiveHeight: false,
    speed: 500,
    slidesToShow: 7,
    slidesToScroll: 7,
    responsive: [{
      breakpoint: 1200,
        settings: {
          slidesToShow: 6,
          slidesToScroll: 6
        }
    }, {
      breakpoint: 1024,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 4
        }
    }, {
      breakpoint: 768,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3
        }
    }, {
      breakpoint: 480,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
    }]
};

var subcategories = this.state.subcategories.map(function(subcategory){
  return(
      <div key={subcategory.id}>
        <div className="active-link-with-image tt-cp text-2">
          <a data-category={subcategory.slug}>
            <img src={subcategory.images.thumb}/>
            <div className="name">
              <span>{subcategory.name}</span>
            </div>
          </a>
        </div>
      </div>
  )
});

return (
  <div className="slick-categories">
    <Slider {...slickSettings} ref="slick">
      {subcategories}
    </Slider>
    <div className="spinner loading" ref="spinner"/>
  </div>
);
}

[akiran]

Slider is not getting update when new slides are arrived

Earlier we used to reinitialize slider when props changed, but removed it to fix other issue #85
01e6e4b

Need to find a different solution