I have a working component that I would like to enhance with proper TypeScript typing for the props. Currently, I am using "any" as the type. Here is my current code snippet:
import React, {useState, useEffect} from "react";
type ImageSrc = React.SetStateAction<null>
//Here is where I need help with typing the props
const AsyncImage = (props: any) => {
const [loadedSrc, setLoadedSrc] = useState<ImageSrc>(null);
useEffect(() => {
setLoadedSrc(null);
if (props.src) {
const handleLoad = () => {
setLoadedSrc(props.src);
};
const image = new Image();
image.addEventListener('load', handleLoad);
image.src = props.src;
return () => {
image.removeEventListener('load', handleLoad);
};
}
}, [props.src]);
if (loadedSrc === props.src) {
return (
<img {...props} alt=""/>
);
}
return null;
};
export default AsyncImage