React-responsive-carousel: Thumbnails do not update with images when state changes.

[paulgasbarra]

I am polling an endpoint for new images using a setInterval() function.

Every interval I set the state of a responses array.

 render(){
    return (
      <Carousel
        selectedItem={this.state.selectedItem}
        onClickThumb={this._onClickThumb.bind(this)}
      >
        {
          this.state.responses.map(function(url){
              return <img src={url} key={url} />
            }
          )
        }
      </Carousel>
    )
  }
}

When I get a new image, the image is present in "ul.control-dots" but not in the thumbs.

The thumbs do not update along with the changing images.

Is there a way to refresh the thumbs when I add or remove images?

[leandrowd]

This use case was not covered when I built it but should be pretty simple to add support to it. Check if the setupThumbs method is being called when you update the images. PRs welcome.

[koonfaixie]

How I solved this was by adding another condition to componentDidUpdate;
if the children changes, invoke setupThumbs

if ((!prevProps.children && this.props.children && !this.state.initialized ) || prevProps.children != this.props.children) {
this.setupThumbs();
}

[driskell]

Another workaround is to set a key against the carousel component that corresponds to the images. In my case the images were small number so I stringify the images list. This causes a change in images to render a new carousel component and destroy the old one.

[driskell]

I will try a PR to address this shortly. I just noticed some glitching with the arrows taking a second render to appear so will try clean everything nicely and also expose updateSizes so there’s an API to hit if the carousel dimensions needs updating.

[justin22]

Weirdly, this issue still happens for me.
The slider images gets updated, but not the thumbs. I have gone through the PR, but couldn't find the solution.

<Carousel 
  showArrows={true}
  showStatus={false}
  showThumbs={true}
  showIndicators={false}
  swipeable={true}
  infiniteLoop={false}
  useKeyboardArrows={true}
>
  {
    this.props.images.map((value, index) => {
      return (
       <div key={index}>
         <img 
           key={index}
           src={value.image} 
         />
      </div>            
     )
   })
  }
</Carousel>

Update: I was able to override this with forceUpdate based on some other props on the page