How to make a stub before loading an image (onLoad)?

Question

React

Hello. On the page, you need to use 3 different images and make a stub for each image before uploading the image. The method below does not work, namely, the image is not displayed, what is wrong?

const [isLoading, setLoading] = React.useState(false);
const handleOnLoad = () => {
    setLoading(true);
}

{isLoading === true ? (<img onLoad={handleOnLoad } src="https://i.5sfer.com/post/postImage/thumb-8ipwnn.jpg"/>) : (<div>*Заглушка*</div>)}

https://codesandbox.io/s/loving-worker-dc1x5

Answer 1

You can’t load a picture with such logic either, since you have isLoading false, img is not rendered and onLoad is not called

Answer 2

Example of correct usage https://codesandbox.io/s/fragrant-glade-8huj6