How to preview selected image in react js? this is my code. I am new to react.js and I still have no idea how to call functions or like this.
const HomepagePage = (props) => {
const hiddenFileInput = React.useRef(null);
const handleClick = event => {
hiddenFileInput.current.click();
};
const handleChange = event => {
const fileUploaded = event.target.files[0];
props.handleFile(fileUploaded);
};
return (
<>
<Button
className="common-pointer font-bold lg:ml-[44px] xl:ml-[56px] 2xl:ml-[63px] 3xl:ml-[75px] lg:text-[18px] xl:text-[23px] 2xl:text-[25px] 3xl:text-[31px] text-center tracking-ls1 w-[63%]"
onClick={handleClick}
shape="RoundedBorder5"
>
Upload Image
</Button>
<input type="file"
ref={hiddenFileInput}
onChange={handleChange}
style={{display:'none'}}
/>
<Img
src="images/img_11.png"
className="absolute lg:h-[382px] xl:h-[478px] 2xl:h-[537px] 3xl:h-[645px] w-[100%]"
alt="Eleven"
/>
The image selected from the button should replace the image 11. Any idea how to do this?
