title: How to render an iframe using third party script in ReactJS
body: <p>I am working on ReactJS project and want to render an iframe which is rendering using third party script.</p>
  
  <p>Kindly check the problem below:</p>
  
  <p><strong>I have an component name add-data.js.</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  import Helmet from 'react-helmet';
  import ogImage from '../../../../public/images/qcf-logo-whitebg.svg';
  import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
  import ApplyNowNavbar from '../Header/ApplyNowHeader';
  import ApplyNowFooter from '../Footer/ApplyNowFooter';
  
  export default class ApplyNow extends Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;Navbar /&gt;
                  &lt;div id="iframe-container"&gt;&lt;/div&gt; //iframe will be loadd inside this div
                  &lt;Footer /&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>index.html main file</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
  &lt;script src="www.example.com/iframe-script.js"&gt;&lt;/script&gt; &lt;!--this file will load iframe in iframe-container div--&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="app"&gt;&lt;/div&gt;
          &lt;script src="../js/app.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>this code works only when reload the page but I want to render iframe without reload the page but render ReactJS component.</p>
  
  <p>Can anybody help me out how can I do that.</p>
  
  <p>Thanks in advance.</p>