Is there a way to get the currentIndex of the selected image using Hooks?

[rgala98]

`
const ImageGallery = () => { const images_array = [...all Images Here]; const [images, setImages] = useState(images_array); const [currentImage, setCurrentImage] = useState(0);

const onCurrentImageChange = (index) => { setCurrentImage(index); }

const deleteImage = () => { if (window.confirm(Are you sure you want to delete image number ${currentImage}?)) { var images = images.slice(); images.splice(currentImage, 1) setImages(images) } }

return ( <div style={{ display: "block", minHeight: "1px", width: "100%", border: "1px solid #ddd", overflow: "auto"}}>

        <div style={{
            padding: "2px",
            color: "#666"
           }}>Current image: {currentImage}</div>
        <Gallery
            images={images}
            enableLightbox={true}
            enableImageSelection={false}
            currentImageWillChange={() => onCurrentImageChange(###getCurrentIndex())}
        

            customControls={[
                <button key="deleteImage" onClick={() => deleteImage()}>Delete Image</button>
            ]}
        />
    </div>
)

} `

[itoldya]

Hi @rgala98!

Yes, you can get the current index by the currentImageWillChange hook, it's passed there as a first param. You just need to make this small change in your code

- currentImageWillChange={() => onCurrentImageChange(###getCurrentIndex())}
+ currentImageWillChange={onCurrentImageChange}