Thumbnails do not update with images when state changes.

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?

[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.

[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