How to reset img tag in react js?

Question

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.

QueueManager.js:

const [items1, setItems1] = useState({
toggle: false,
data_form: [],
cardguid: '',
buttonDisable: "",
isOpen: false,
});

const handleShowDialog = () => {
setItems1({...items1,isOpen: !items1.isOpen,});
// console.log("cliked");
// alert('Yes');
};

Table.js:

  <div>
    <span onClick={(e) => props.handleShowDialog()} style={{marginLeft: '30%'}}><i class='fas fa-image'></i></span>

    {props.isOpen && (
      <dialog
        className="dialog"
        style={{ position: "absolute" }}
        open
        onClick={(e) => props.handleShowDialog()}
      >
        <img
          className="photo"
          src= {'...' + props.item.cardguid.replace(/-/g, '') + '_front.jpg'}
          alt="no image"
        />
        <img
          className="photo"
          src= {'...' + props.item.cardguid.replace(/-/g, '') + '_back.jpg'}
          alt="no image"
        />
      </dialog>
    )} 
  </div>

Answer 1

I have updated the same for you, There were couple of bugs:

1. You were using same variable to control both the images
2. You had accidentally put the src of image in second div same as that of first one.

Here is the updated sandbox

https://codesandbox.io/s/how-to-set-a-modal-popup-with-an-image-in-react-forked-e5f50?file=/src/component/ImageComponent.js:0-1793

I have used two separate handlers for image, just so that you get the point.

If the length is not known you need to run a map function and in handleClick you can pass the index to change the size

import React from "react";
import "../styles.css";
export default class ImageComponent extends React.Component {
  state = { isOpen: false };
  state = { isOpen2: false };

  handleShowDialog = () => {
    this.setState({ isOpen: !this.state.isOpen });
    console.log("cliked");
  };
  handleShowDialog2 = () => {
    this.setState({ isOpen2: !this.state.isOpen });
    console.log("cliked");
  };

  render() {
    return (
      <div>
        <img
          className="small"
          src="https://kronozio.blob.core.windows.net/images/card/c5d61f9b124648b2ae4cbab63011fbc4_front.jpg"
          height={150}
          weight={200}
          onClick={this.handleShowDialog}
          alt="no image"
        />
        {this.state.isOpen && (
          <dialog
            className="dialog"
            style={{ position: "absolute" }}
            open
            onClick={this.handleShowDialog}
          >
            <img
              className="image"
              src="https://kronozio.blob.core.windows.net/images/card/c5d61f9b124648b2ae4cbab63011fbc4_front.jpg"
              onClick={this.handleShowDialog}
              height={150}
              weight={200}
            />
          </dialog>
        )}

        <img
          className="small"
          src="/Anj.png"
          onClick={this.handleShowDialog2}
          alt="no image"
        />
        {this.state.isOpen2 && (
          <dialog
            className="dialog"
            style={{ position: "absolute" }}
            open
            onClick={this.handleShowDialog2}
          >
            <img
              className="image"
              src="/Anj.png"
              onClick={this.handleShowDialog2}
              alt="no image"
            />
          </dialog>
        )}
      </div>
    );
  }
}

Answer 2

I've already done mapping over the image. Here's the code:

  // mapping our fetched data to table.here cardguid is our unique key to 
  distinguish all our data
  const data1 = items1.elements.map((item) => (
<Table_QueueManager
  key={item.cardguid}
  item={item}
  handleShowDialog={handleShowDialog}
  onRadioChange={onRadioChange}
  // clickImage = {clickImage}
  isOpen={items1.isOpen}
  img_url={items1.img_url}
/>
 ));

This code is for the client end, where I put the image dynamically

     <td>
      <div>
    <span onClick={(e) => props.handleShowDialog()} style={{marginLeft: '30%'}}><i class='fas fa-image'></i></span>
    
    
    {props.isOpen && (
      <dialog
        className="dialog"
        style={{ position: "absolute" }}
        open
        onClick={(e) => props.handleShowDialog()}
      >
        <img
          className="photo"
          src= {'https://kronozio.blob.core.windows.net/images/card/' + props.item.cardguid.replace(/-/g, '') + '_front.jpg'}
          alt="no image"
        />
        <img
          className="photo"
          src= {'https://kronozio.blob.core.windows.net/images/card/' + props.item.cardguid.replace(/-/g, '') + '_back.jpg'}
          alt="no image"
        />
      </dialog>
    )} 
  
  </div>
      

      </td>