possible bug in onClick event handling in Gallery

[dvdmrn]

I'm not 100% sure if this is a bug or not, however I copied and pasted the lightbox integration tutorial here: http://neptunian.github.io/react-photo-gallery/examples/lightbox.html .

The photo gallery seems to load fine, but the lightbox component doesn't seem to pop up when I click on the images.

If I add a div with its own onClick event, this works as normal

...
 return (
    <div>
      <div onClick={e=>alert("this works as normal")}> click me</div>
      <Gallery photos={photos} onClick={openLightbox} />
      <ModalGateway>
        ...

When I add a console.log() into openLightbox, I see that it is never called. The onClick event in the Gallery component does not seem to be firing.

To be sure that this wasn't because there wasn't any parenting or event propagation issues, I rendered this similar to the example:
ReactDOM.render(<PhotoGallery/>, document.getElementById('root'));

The only difference is that I saved your example as PhotoGallery.js, and imported it into my index.js. Since the photo gallery successfully renders I am inclined to think that there are no import issues here.

Also I have installed the dependency react-images

I've tested this in both firefox and chrome

[daydream05]

Running into a similar issue!

[ravitejamsr]

@dvdmrn and @daydream05 If you want to generate any events in the photo gallery image you can render your own image by fallowing code

<PhotoGallery
renderImage={this.render_image}
onClick={this.click_event}
/>
render_image = props => {
    return (
      <div
        style={{
          height: props.photo.height,
          width: props.photo.width,
          ...cont
        }}
      >
        <img
          {...props.photo}
          onClick={() => this.click_event(event, props.photo)}
         
        />
      </div>
    );
  };

Here props are the details of the image that you are sending to Gallery
For reference you can use this

[daydream05]

Thank you! Got it to work

[dvdmrn]

Apologies I'm not sure where render_image is supposed to go. I'm merely trying to replicate the lightbox tutorial. When I looked at the Sortable Gallery tutorial I see a property for renderImage in Gallery. I can also add this property in the lightbox example, but I don't think it does what I need. In the lightbox example, when I change the Gallery onClick event to e=>alert("hello") it works as expected. But when I run this locally it does not. When I run it locally, everything the gallery loads fine without errors, except the onClick event does not work. My end goal for this is just to get the lightbox working as it does in the tutorial.

[ravitejamsr]

@dvdmrn you can use render_image like a normal function in the component.