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