title: image modal with reactjs using javascript
body: <p>I am tring to open a image modal on clicking the image.I am getting a list of image from the restapi.But my page shows nothing when its rendered.I am using this link as reference: <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img" rel="nofollow noreferrer">https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img</a></p>
  
  <pre><code>getAllProjectRequirementImageList = () =&gt; {
      axios.get(this.state.apiUrl+'/api/v1/visitRequirement/getAllByProjectId', {
          params: {   projectId: this.state.projectId }
      }).then((response) =&gt; {
          console.log("get with list ImageData",response.data.data);
          this.setState({ ioImageListing: response.data.data  });
      }).catch((error)=&gt;{  console.log("error",error); this.setState({ ioImageListing: []  });   });
  };
  
  
  
  
   componentDidMount() {
      console.log('componentDidMount colling ...');
      this.getAllProjectRequirementImageList();
      // responsive
      var modal = document.getElementById('myModal');
  
      // Get the image and insert it inside the modal - use its "alt" text as a caption
      var img = document.getElementById('myImg');
      var modalImg = document.getElementById('img01');
      var captionText = document.getElementById('caption');
  
      if (img) {
        img.onclick = () =&gt; {
          modal.style.display = 'block';
          modalImg.src = this.src;
          captionText.innerHTML = this.alt;
        };
      }
  
      // Get the &lt;span&gt; element that closes the modal
      var span = document.getElementsByClassName('close')[0];
      span.onclick = () =&gt; {
        modal.style.display = 'none';
      };
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;div&gt;
            {this.state.ioImageListing.map((io, key) =&gt; {
              io.visitRequirementList.map((skill, j) =&gt; (
                &lt;img
                  id="myImg"
                  src={
                    this.state.apiUrl +
                    '/api/v1/visitImageRequirementInfo/getImageByImagePathId?imagePath=' +
                    skill.imagePath
                  }
                  alt="Snow"
                  style={width:"100%";maxWidth:"300px"}
                /&gt;
              ));
            })}
          &lt;/div&gt;
  
          &lt;div id="myModal" className="modal"&gt;
            &lt;div&gt;
              &lt;span className="close"&gt;&amp;times;&lt;/span&gt;
              &lt;img className="modal-content" id="img01" /&gt;
              &lt;div id="caption"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>and this is the json response i am getting from backend:</p>
  
  <pre><code>{
    "data": [
      {
        "id": "8c83ac41-13b2-4827-96bc-dd251c4cf929",
        "visitLocation": "bedroom",
        "visitRequirementList": [
          {
  
            "imagePath": "visitImageDirectory/332c3b83-82d3-45b6-9660-309ebc3f246d.png",
  
          },
          {
  
            "imagePath": "visitImageDirectory/332c3b83-82d3-45b6-9660-309ebc3f246d.png",
  
          }
  
        ]
      },
      {
        "id": "05c36c21-adc6-4fa3-9609-b3dea67b9e69",
        "visitLocation": "kitchen",
        "visitRequirementList": [
          {
  
            "imagePath": "visitImageDirectory/7678f04c-22bd-4735-9f7d-8c34db31b714.png"
  
          },
  
        ]
      }
    ],
    "message": "data Found",
    "status": "success"
  }
  </code></pre>
  
  <p>How can i show a list of images in a modal calling data from restapi.My restapi works fine.Any help regarding this would be appreciated.</p>