{"action":"created","issue":{"url":"https://api.github.com/repos/leandrowd/react-responsive-carousel/issues/72","repository_url":"https://api.github.com/repos/leandrowd/react-responsive-carousel","labels_url":"https://api.github.com/repos/leandrowd/react-responsive-carousel/issues/72/labels{/name}","comments_url":"https://api.github.com/repos/leandrowd/react-responsive-carousel/issues/72/comments","events_url":"https://api.github.com/repos/leandrowd/react-responsive-carousel/issues/72/events","html_url":"https://github.com/leandrowd/react-responsive-carousel/issues/72","id":197756056,"number":72,"title":"autoPlay option does not update after re-render","user":{"login":"jeffreznik","id":2762777,"avatar_url":"https://avatars.githubusercontent.com/u/2762777?v=3","gravatar_id":"","url":"https://api.github.com/users/jeffreznik","html_url":"https://github.com/jeffreznik","followers_url":"https://api.github.com/users/jeffreznik/followers","following_url":"https://api.github.com/users/jeffreznik/following{/other_user}","gists_url":"https://api.github.com/users/jeffreznik/gists{/gist_id}","starred_url":"https://api.github.com/users/jeffreznik/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jeffreznik/subscriptions","organizations_url":"https://api.github.com/users/jeffreznik/orgs","repos_url":"https://api.github.com/users/jeffreznik/repos","events_url":"https://api.github.com/users/jeffreznik/events{/privacy}","received_events_url":"https://api.github.com/users/jeffreznik/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-12-27T20:50:01Z","updated_at":"2016-12-28T21:14:03Z","closed_at":null,"body":"In my app, I have a Google map with clickable markers representing properties.  When a marker is clicked, the Carousel is updated with new images and props.  The autoPlay prop is true if there are 2 or more images, and false if there is only 1 image.\r\n\r\nReproduction steps:\r\n1. Click on marker for property with 2+ images\r\n2. Click on marker for property with 1 image\r\n\r\nExpected result:\r\nAfter step 1, Carousel autoplays.  After step 2, Carousel stays on the one and only image.\r\n\r\nActual:\r\nAfter step 1, Carousel autoplays.  After step 2, Carousel continues to autoPlay past the first image into oblivion.\r\n\r\nNote:\r\nThere are actually 2 bugs here:\r\n1. As described above, autoPlay option should update on re-render to respect the new true/false value (it fails both ways)\r\n2. autoPlay on a Carousel with a single image should not autoPlay at all.  Right now it will continue to autoPlay to infinity.\r\n\r\nCode (my Carousel component which wraps react-responsive-carousel):\r\n\r\n```jsx\r\nimport React from 'react'\r\nimport RRCarousel from 'react-responsive-carousel'\r\n\r\nconst Carousel = ({ images, axis='horizontal', showThumbs=true, showArrows=true, showStatus=true, autoPlay=true }) => {\r\n  // TODO: add legend support, images should be array of objects... see react-responsive-carousel documentation\r\n  let elements = <div key=\"none\"><img src=\"/images/no-photo-available.gif\" alt=\"\"/></div>\r\n  let infiniteLoop = false\r\n  let showIndicators = false\r\n  if (images.length) {\r\n    elements = images.map((image, index) => <div key={index}><img src={image} alt=\"\"/></div>)\r\n    infiniteLoop = images.length > 1\r\n    showIndicators = images.length > 1\r\n  } else {\r\n    autoPlay = false\r\n  }\r\n  console.log('infiniteLoop', infiniteLoop)\r\n  console.log('autoPlay', autoPlay)\r\n  return (\r\n    <div className=\"carousel\">\r\n      <RRCarousel.Carousel\r\n      axis={axis}\r\n      showThumbs={showThumbs}\r\n      showArrows={showArrows}\r\n      showStatus={showStatus}\r\n      showIndicators={showIndicators}\r\n      autoPlay={autoPlay}\r\n      infiniteLoop={infiniteLoop}\r\n      >\r\n        {elements}\r\n      </RRCarousel.Carousel>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default Carousel\r\n\r\n```\r\n\r\nThe console.log statements accurately report the desired infiniteLoop/autoPlay values, but Carousel does not respect them."},"comment":{"url":"https://api.github.com/repos/leandrowd/react-responsive-carousel/issues/comments/269541766","html_url":"https://github.com/leandrowd/react-responsive-carousel/issues/72#issuecomment-269541766","issue_url":"https://api.github.com/repos/leandrowd/react-responsive-carousel/issues/72","id":269541766,"user":{"login":"jeffreznik","id":2762777,"avatar_url":"https://avatars.githubusercontent.com/u/2762777?v=3","gravatar_id":"","url":"https://api.github.com/users/jeffreznik","html_url":"https://github.com/jeffreznik","followers_url":"https://api.github.com/users/jeffreznik/followers","following_url":"https://api.github.com/users/jeffreznik/following{/other_user}","gists_url":"https://api.github.com/users/jeffreznik/gists{/gist_id}","starred_url":"https://api.github.com/users/jeffreznik/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jeffreznik/subscriptions","organizations_url":"https://api.github.com/users/jeffreznik/orgs","repos_url":"https://api.github.com/users/jeffreznik/repos","events_url":"https://api.github.com/users/jeffreznik/events{/privacy}","received_events_url":"https://api.github.com/users/jeffreznik/received_events","type":"User","site_admin":false},"created_at":"2016-12-28T21:14:03Z","updated_at":"2016-12-28T21:14:03Z","body":"Found a workaround to this... if I put the default \"no photo available\" image tag into an array:\r\n\r\n```jsx\r\nlet elements = [<div key=\"none\"><img src=\"/images/no-photo-available.gif\" alt=\"\"/></div>]\r\n```\r\n\r\nThen it seems to detect the correct number of elements and stop autoPlaying."}}
{"actor":{"display_login":"jeffreznik"}}