Custom rendering made onClick not working.

[leopku]

Describe the bug

1. version: react-photo-album@2.4.1 and yet-another-react-lightbox@3.20.0

2. Codes were very simple and worked fine:

     <PhotoAlbum
       layout="masonry"
       photos={thumbs}
       onClick={({ index }) => setIndex(index)}
     />

3. Today I need custom onError of img, so I add renderPhoto to custom rendering. The onError callback worked as expected but onClick seems not working while I click the image nothing happened even an onClick callback added on img tag.

        renderPhoto={({ photo }) => (
            <img
              title={photo.title}
              src={photo.src}
              class="react-photo-album--photo"
              loading="lazy"
              decoding="async"
              style={{ display: 'block', 'box-sizing': 'content-box', width: 'calc(100% + 0px)', height: 'auto', 'margin-bottom': '20px', cursor: 'pointer'}}
              onClick={({ index }) => setIndex(index)}
              onError={({ target }) =>
                ((target as HTMLImageElement).src = "new_src";
              }
            />
        )}

Expected behavior

When img clicked the lightbox should shown.

How to reproduce

Add onClick and renderPhoto both on PhotoAlbum.

Click the image, lightbox not shown.

Screenshots / Logs

No response

Additional context

No response

[igordanchenko]

You should use the onClick callback that is passed through as part of the imageProps prop.

renderPhoto={({ imageProps }) => (
  <img
    // the onClick is already included in the imageProps
    {...imageProps}
    // override or add image props here
  />
)}

You can find the description and one specific example over here:

https://v2.react-photo-album.com/documentation#RenderPhoto https://v2.react-photo-album.com/examples/nextjs

[leopku]

https://v2.react-photo-album.com/documentation#RenderPhoto https://v2.react-photo-album.com/examples/nextjs

Nice. I need the document for v2 before I could upgrade this awesome library to v3.