Make a proper onClickThumbnail for Lightbox react-images

Question

So I'm setting up a Lightbox component with the react-images library and seem to have everything working. Except for one thing.

I have the thumbnails rendering but I can't create a proper onClick function. This is because I don't know how to get the index of the thumbnail I'm clicking on. If I had the thumbnail index, this wouldn't be a problem.

Here is my current Lightbox component config:

<Lightbox
  images={imageObjects}
  isOpen={openGallery}
  currentImage={middleImageIndex}
  showThumbnails={true}
  onClickThumbnail={this.onImageSelect.bind(this, index)}
  onClickPrev={this.onImageSelect.bind(this, middleImageIndex-1, length)}
  onClickNext={this.onImageSelect.bind(this, middleImageIndex+1, length)}
  onClose={this.onCloseGallery.bind(this)}
/>

How can I know the index of the thumbnail I'm clicking on so I can set it to currentImage?

Thanks!

Answer 1

Okay, I got it. The react-images docs don't tell your custom onClickThumbnail() function will be passed index by default.

So, you need to make a function that handles the index:

onImageSelect(newIndex){
  this.props.setMiddleImage(newIndex)
}

Then you simply add it to onClickThumbnail:

onClickThumbnail={this.onImageSelect.bind(this)}

Then it works.