title: How to reset img tag in react js?
body: <p>Each row has different image source under the each image icon. But the problem is that after clicking on the image icon the images popup happens and maybe it is stored in the cache and when I click the other image icon I'm getting the same image as popup. So, how can I reset the image tag? or what should I do? The code is given below.</p>
  <p><a href="https://i.stack.imgur.com/FYPPw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FYPPw.png" alt="enter image description here" /></a></p>
  <p>QueueManager.js:</p>
  <pre><code>const [items1, setItems1] = useState({
  toggle: false,
  data_form: [],
  cardguid: '',
  buttonDisable: &quot;&quot;,
  isOpen: false,
  });
  
  const handleShowDialog = () =&gt; {
  setItems1({...items1,isOpen: !items1.isOpen,});
  // console.log(&quot;cliked&quot;);
  // alert('Yes');
  };
  </code></pre>
  <p>Table.js:</p>
  <pre><code>  &lt;div&gt;
      &lt;span onClick={(e) =&gt; props.handleShowDialog()} style={{marginLeft: '30%'}}&gt;&lt;i class='fas fa-image'&gt;&lt;/i&gt;&lt;/span&gt;
  
      {props.isOpen &amp;&amp; (
        &lt;dialog
          className=&quot;dialog&quot;
          style={{ position: &quot;absolute&quot; }}
          open
          onClick={(e) =&gt; props.handleShowDialog()}
        &gt;
          &lt;img
            className=&quot;photo&quot;
            src= {'...' + props.item.cardguid.replace(/-/g, '') + '_front.jpg'}
            alt=&quot;no image&quot;
          /&gt;
          &lt;img
            className=&quot;photo&quot;
            src= {'...' + props.item.cardguid.replace(/-/g, '') + '_back.jpg'}
            alt=&quot;no image&quot;
          /&gt;
        &lt;/dialog&gt;
      )} 
    &lt;/div&gt;
  </code></pre>