title: ReactJs : How to reload a component onClick
body: <p>I am new to React and am still learning it. I have a component <strong>Requirements</strong> which I would like to reload everytime <strong>getDocFinancialInfo ()</strong> is called by clicking on the event. The issue is that it loads the correct information the first time but does not refreshes it on subsequent clicks. Any help or suggestion would be most welcome.</p>
  
  <pre><code>    import React, { Component } from 'react';
      import './UploadDocument.css'
      import spinner from './spinner.gif'
      import verified from './verified.png';
      import notverified from './not-verified.png';
      import Requirements from './Requirement.js'
  
  
      class UploadDocument extends Component{
  
        constructor(props) {
          super(props);
          this.state = {
            application: [],
            document:[],
            id: null,
            files: [],
            docFinacialInfo: [],
            uploaded: null,
            fileInfo: []
          }
        }
  
  
        componentDidMount() {
          ......
        }
  
  
  
  
        getDocFinancialInfo = async(docId) =&gt; {
            sessionStorage.setItem('docId',docId);
  
            var req = document.getElementById('requirements');
            req.style.display = "block";
        }
  
  
  
  
        render(){
          ......
  
            if(notVerifiedStatus &gt; 0){
                docVerificationStatus[index] = &lt;td className="red"&gt;&lt;img src={notverified} alt="Not Verified"/&gt;&lt;label onClick={()=&gt;this.getDocFinancialInfo(docId)}&gt;Not Verified{docId}&lt;/label&gt;&lt;/td&gt;;
            }else{
                docVerificationStatus[index] = &lt;td className="green"&gt;&lt;img src={verified} alt="Verified" /&gt;&lt;label&gt;Verified&lt;/label&gt;&lt;/td&gt;;
            }
            console.log("Not Verified &gt;&gt;&gt;"+notVerifiedStatus);
          });
  
          ......
  
          return(
            &lt;div&gt;
  
                  .........
  
                      &lt;div id="requirements"&gt;
                        &lt;div id="requirements-content"&gt;
                          &lt;span className="close" onClick={()=&gt;this.closeRequirements()}&gt;&amp;times;&lt;/span&gt;
                          &lt;Requirements /&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
  
                  .........
            &lt;/div&gt;
          )
        }
      }
  
      export default UploadDocument
  </code></pre>