Duplicate image download issue in reactjs - reactjs

Question

Two components are used to process the image operation. First component is ShowFormsList inside it onDownloadFile is used and another component ShowImgList which is used to pass onDownloadFile method and ImgList as props .
ShowFormsList.jsx
import React, { useEffect, useContext } from "react";
import PropTypes from "prop-types";
import {
Subheading,
Accordion,
AccordionItem,
} from "#contentful/forma-36-react-components";
import Jarvis from "../../utils/Jarvis";
import LoadingContext from "../../context/LoadingContext";
import ShowImgList from "./ShowImgList";
const ShowFormsList = ({ sdk }) => {
const [view, setView] = React.useState(null);
const jarvisSdk = new Jarvis(sdk);
const { showLoading, hideLoading } = useContext(LoadingContext);
const fieldType = (sdk && sdk.field.id) || "";
// const [update, setUpdate] = React.useState(false);
const autoScroll = () => {
sdk.window.startAutoResizer();
};
useEffect(() => {
sdk.window.startAutoResizer();
});
const getFormData = async () => {
showLoading();
const formData = await jarvisSdk.getFormData(sdk.ids.entry);
const formArr =
formData &&
formData.length > 0 &&
formData.map((form) => {
const formObj = {
formName: form.formName,
formId: form.id,
formDescription: form.description,
};
// const imgArr = [];
const imgArr =
form.formImages &&
form.formImages.length > 0 &&
form.formImages.map((img) => {
console.log(img);
const imgObj = {
imageName: img.imageName,
type: img.type,
extension: img.imageName.split(".")[1],
id: img.id,
};
// imgArr.push(imgObj);
return imgObj;
});
formObj.images = imgArr;
return formObj;
// formArr.push(formObj);
});
if (formArr && formArr.length > 0) {
setView(formArr);
}
hideLoading();
};
useEffect(async () => {
await getFormData();
}, []);
const onDownloadFile = async (id) => {
showLoading();
const downloadedFile = await jarvisSdk.downloadFormFile(id, fieldType);
const contentDispositionHeader = downloadedFile.responseObj.request
.getResponseHeader("Content-disposition")
.split("filename=");
const fileName =
contentDispositionHeader[contentDispositionHeader.length - 1];
const url = window.URL.createObjectURL(new Blob([downloadedFile.blob]));
const link = document.createElement("a");
link.setAttribute("download", `${fileName}`);
link.setAttribute("id", Math.random() + fileName);
link.href = url;
document.body.appendChild(link);
link.click();
link.remove();
hideLoading();
};
return (
<>
{view && view.length > 0 && (
<div className="App">
<div className="Card">
<div className="container">
<Accordion>
{view.map((item) => (
<AccordionItem
key={item.formId}
title={
<a
className="text-decoration"
href={`https://app.contentful.com/spaces/${sdk.ids.space}/environments/${sdk.ids.environment}/entries/${item.formId}`}
target="_black"
>
{item.formName}
</a>
}
onExpand={() => autoScroll()}
onCollapse={() => autoScroll()}
>
<ShowImgList
key={item.formId}
images={item.images}
onDownloadFile={onDownloadFile}
sdk={sdk}
/>
</AccordionItem>
))}
</Accordion>
</div>
</div>
</div>
)}
{!view && (
<div className="App">
<div className="Card">
<div className="container">
<div className="dropZoneContainer">
<div className="Dropzone">
<Subheading className="d-color">No data found.</Subheading>
</div>
</div>
</div>
</div>
</div>
)}
</>
);
};
const propTypes = {
sdk: PropTypes.instanceOf(Object),
};
ShowFormsList.defaultProps = {
sdk: undefined,
};
ShowFormsList.propTypes = propTypes;
export default ShowFormsList;
The second component is used to call the onDownloadFile method and perform the UI part operation.
ShowImgList.jsx
import {
Table,
TableBody,
TableCell,
TableHead,
TableRow,
TabPanel,
Icon,
} from "#contentful/forma-36-react-components";
import React, { useEffect } from "react";
import PropTypes from "prop-types";
const ShowImgList = (props) => {
const { images, onDownloadFile, sdk } = props;
useEffect(() => {
sdk.window.startAutoResizer();
});
const defaultTab = "first";
return (
<div className="fileVersionContainer">
<TabPanel id={defaultTab} className="versionContainer">
<div>
<Table>
<TableHead>
<TableRow>
<TableCell>Image</TableCell>
<TableCell>File Name</TableCell>
<TableCell>Type</TableCell>
<TableCell>Download</TableCell>
</TableRow>
</TableHead>
<TableBody>
{images &&
images.length > 0 &&
images.map((aImg) => (
<TableRow key={aImg.id}>
<TableCell key={`${aImg.id}cell`}>
<Icon key={`${aImg.id}asset`} icon="Asset" />
</TableCell>
<TableCell key={`-name-${aImg.id}`}>
{aImg.imageName}
</TableCell>
<TableCell key={`-type-${aImg.id}`}>
{aImg.extension}
</TableCell>
<TableCell key={`-download-${aImg.id}`}>
<Icon
icon="Download"
className="cursor-pointer"
onClick={() => onDownloadFile(aImg.id)}
/>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</TabPanel>
</div>
);
};
const propTypes = {
sdk: PropTypes.instanceOf(Object),
images: PropTypes.instanceOf(Array),
onDownloadFile: PropTypes.func,
};
ShowImgList.defaultProps = {
sdk: undefined,
images: undefined,
onDownloadFile: undefined,
};
ShowImgList.propTypes = propTypes;
export default ShowImgList;