{"action":"closed","issue":{"url":"https://api.github.com/repos/akiran/react-slick/issues/29","repository_url":"https://api.github.com/repos/akiran/react-slick","labels_url":"https://api.github.com/repos/akiran/react-slick/issues/29/labels{/name}","comments_url":"https://api.github.com/repos/akiran/react-slick/issues/29/comments","events_url":"https://api.github.com/repos/akiran/react-slick/issues/29/events","html_url":"https://github.com/akiran/react-slick/issues/29","id":62829370,"number":29,"title":"Correct spacing not added when child elements are React Components","user":{"login":"yuzeh","id":351023,"avatar_url":"https://avatars.githubusercontent.com/u/351023?v=3","gravatar_id":"","url":"https://api.github.com/users/yuzeh","html_url":"https://github.com/yuzeh","followers_url":"https://api.github.com/users/yuzeh/followers","following_url":"https://api.github.com/users/yuzeh/following{/other_user}","gists_url":"https://api.github.com/users/yuzeh/gists{/gist_id}","starred_url":"https://api.github.com/users/yuzeh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yuzeh/subscriptions","organizations_url":"https://api.github.com/users/yuzeh/orgs","repos_url":"https://api.github.com/users/yuzeh/repos","events_url":"https://api.github.com/users/yuzeh/events{/privacy}","received_events_url":"https://api.github.com/users/yuzeh/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2015-03-18T23:49:05Z","updated_at":"2016-10-07T07:12:06Z","closed_at":"2016-10-07T07:12:06Z","body":"Thanks for this library!\r\n\r\nI tried initializing a `<Slider>` with a user defined React component as children, the proper spacing between elements to satisfy `slidesToShow` and `slidesToScroll` is not set. However, when I \"inline\" these elements, things work great.\r\n\r\nExample code that doesn't work properly:\r\n```javascript\r\n  var Bar = React.createClass({\r\n    render: function() {\r\n      return (\r\n          <div>\r\n            <img src={this.props.imageUrl} />\r\n          </div>\r\n      );\r\n    },\r\n  });\r\n\r\n  var Foo = React.createClass({\r\n    render: function() {\r\n      var items = this.props.items.map(function(item, i) {\r\n        return (\r\n          <Bar key={item.id} imageUrl={item.imageUrl} />\r\n        );\r\n      });\r\n\r\n      var settings = {\r\n        arrows: true,\r\n        dots: true,\r\n        responsive: false,\r\n        infinite: false,\r\n        draggable: false,\r\n        slidesToShow: 10,\r\n        slidesToScroll: 5,\r\n      };\r\n\r\n      return (\r\n        <Slider className='my-class' {...settings}>\r\n          {items}\r\n        </Slider>\r\n      )\r\n    },\r\n  });\r\n```\r\n\r\nExample code that works properly:\r\n```javascript\r\n  var Foo = React.createClass({\r\n    render: function() {\r\n      var items = this.props.items.map(function(item, i) {\r\n        return (\r\n          <div key={item.id}>\r\n            <img src={item.imageUrl} />\r\n          </div>\r\n        );\r\n      });\r\n\r\n      var settings = {\r\n        arrows: true,\r\n        dots: true,\r\n        responsive: false,\r\n        infinite: false,\r\n        draggable: false,\r\n        slidesToShow: 10,\r\n        slidesToScroll: 5,\r\n      };\r\n\r\n      return (\r\n        <Slider className='my-class' {...settings}>\r\n          {items}\r\n        </Slider>\r\n      )\r\n    },\r\n  });\r\n```\r\n\r\nIs this a known problem, and if so is there a good way to fix it?"}}
{"actor":{"display_login":"akiran"}}