title: How to display a image selected from input type = file in reactJS
body: <p>I'm trying to display a image selected from my computer in my web app. I referred the following question which addresses the question i'm trying to fix. </p>
  
  <p><a href="https://stackoverflow.com/questions/17138244/how-to-display-selected-image-without-sending-data-to-server">How to display selected image without sending data to server?</a></p>
  
  <p>I have my html part like this</p>
  
  <pre><code> &lt;div className="add_grp_image_div margin_bottom"&gt;
        &lt;img src={img_upload} className="add_grp_image"/&gt;
        &lt;input type="file" className="filetype" id="group_image"/&gt;
        &lt;span className="small_font to_middle"&gt;Add group image&lt;/span&gt;
        &lt;img id="target"/&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I want to display the selected image in</p>
  
  <pre><code>&lt;img id="target"/&gt;
  </code></pre>
  
  <p>How can i do this?</p>
  
  <p>I referred <code>FileReader</code> docs as well. </p>
  
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/FileReader</a></p>