Why is there an error in the function of passing the index of an image in a lightbox?

Question

React

https://codesandbox.io/s/elastic-voice-7nynb?file=...

I'm trying to hang an onclick inside the slider for each picture to open a lightbox with a picture corresponding to the index slide. If I uncomment the line “onClick={openLightboxOnSlide(key)}” in my code, I get an error: Too many re-renders. React limits the number of renders to prevent an infinite

loop

Answer 1

Because you don't see the difference between a function and the result of calling it.
Add () =>before openLightboxOnSlide(key)(by the way, why the hell is the variable containing the index named key?).
But in general, an additional method is not needed. And you don't need to store the object in lightIndex. Let the index take a default value that cannot be a valid index (for example null, or -1) - this will mean that nothing needs to be shown:

const [ lightIndex, setLightIndex ] = useState(null);

<img onClick={() => setLightIndex(key)} />

<ReactBnbGallery
  photos={photos}
  show={lightIndex !== null}
  activePhotoIndex={lightIndex}
  onClose={() => setLightIndex(null)}
/>