[Feature request] Support for multiple modals/galleries on a page

[jpkelly]

When adding 2 or more modals/carousels on a page there is a conflict. Can the instances (states?) have a property where they can be assigned a unique identifier?

Expected: When clicking a thumbnail for one of two or more galleries the image the image appearing in the lightbox should be the same as the image in thumbnail.

Actual: The image which appears is from the last gallery on the page regardless of which gallery is clicked on.

Example: https://codesandbox.io/s/react-photo-gallery-with-image-viewer-gcsq8

[jpkelly]

I am very new to React. I would attempt to implement this but not sure where to start.

[BrendanHart]

I believe your issue is to do with a misuse of state.

You are using the same closeLightbox and openLightbox callbacks for each Modal, and therefore you will see when you click an image, both of the images are displayed, with the second lightbox image being on top of the image selected from the first lightbox. The images that displayed have the same ID in their respective lightbox, since we are using the same state.

To fix this, you need to have a separate

  const [currentImage, setCurrentImage] = useState(0);
  const [viewerIsOpen, setViewerIsOpen] = useState(false);

for each Modal, and then create separate openLightbox and closeLightbox callbacks for each.

Hope this helps.