React Js reload/refresh image with same URL onClick

        const { useState, useEffect } = React;

​

        function App() {

            const [imageKey, setImageKey] = useState(0);

            const [imageLoaded, setImageLoaded] = useState(false);

​

            useEffect(() => {

                setImageLoaded(false); // Reset the imageLoaded state when imageKey changes

            }, [imageKey]);

​

            const handleClick = () => {

                setImageKey(prevKey => prevKey + 1);

            };

​

            const handleImageLoad = () => {

                setTimeout(() => {

                    setImageLoaded(true);

                }, 100); // Add a slight delay to allow the transition effect to take effect

            };

​

            return (

                <div className="container">

                    <h3>React Js reload/refresh image with same URL onClick</h3>

                    <img

                        src={`https://www.sarkarinaukriexams.com/images/editor/1670265927Capture123243243423.PNG?key=${imageKey}`}

                        alt="Reloadable Image"

                        className={imageLoaded ? 'fade-in' : 'fade-out'}

                        onLoad={handleImageLoad}

                        onClick={handleClick}

                    />

                </div>

            );

        }

​

        ReactDOM.render(<App />, document.getElementById("app"));

    </script>