title: How to include HTML/JS widget to reactjs?
body: <p>I'm trying to display the <a href="https://www.tradingview.com/widget/crypto-mkt-screener/?fbclid=IwAR2lds7AtJx8uTt6j14PUiOs3o6RoVV_zLb-BtEOYc0m0VJYFgQNUQQzbpI" rel="nofollow noreferrer">TradingView widget</a> in my ReactJS app but none of the methods I've tried worked.</p>
  
  <p>The code I'm trying to include : </p>
  
  <pre><code>  &lt;div class="tradingview-widget-container__widget"&gt;&lt;/div&gt;
    &lt;div class="tradingview-widget-copyright"&gt;&lt;a href="https://www.tradingview.com/markets/cryptocurrencies/prices-all/" rel="noopener" target="_blank"&gt;&lt;span class="blue-text"&gt;Cryptocurrency Markets&lt;/span&gt;&lt;/a&gt; by TradingView&lt;/div&gt;
    &lt;script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-screener.js" async&gt;
    {
    "width": 1000,
    "height": 490,
    "defaultColumn": "overview",
    "screener_type": "crypto_mkt",
    "displayCurrency": "USD",
    "colorTheme": "light",
    "transparency": false,
    "locale": "en"
  }
    &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Tried to render using :
  <code>&lt;div dangerouslySetInnerHTML={{ __html: THECODE }} /&gt;</code></p>
  
  <p>Tried to render like this: </p>
  
  <pre><code>  &lt;div className="tradingview-widget-container__widget"&gt;&lt;/div&gt;
    &lt;div className="tradingview-widget-copyright"&gt;&lt;a href="https://www.tradingview.com/markets/cryptocurrencies/prices-all/" rel="noopener" target="_blank"&gt;
    &lt;span className="blue-text"&gt;Cryptocurrency Markets&lt;/span&gt;&lt;/a&gt; by TradingView&lt;/div&gt;
    {this.loadScript('https://s3.tradingview.com/external-embedding/embed-widget-screener.js')}
  &lt;/div&gt;
  </code></pre>
  
  <p>using this loadScript function :  </p>
  
  <pre><code>loadScript = function(src) {
      var tag = document.createElement(`script`, {
        width: 1000,
        height: 490,
        defaultColumn: "overview",
        screener_type: "crypto_mkt",
        displayCurrency: "USD",
        colorTheme: "light",
        transparency: false,
        locale: "en",
      });
      tag.async = true;
      tag.type = 'text/javascript';
      tag.src = src;
      document.getElementsByTagName('div')[0].appendChild(tag);
    }
  </code></pre>
  
  <p>Not working the API says that settings are invalids. </p>
  
  <p>Also tried to do : </p>
  
  <pre><code>  &lt;div class="tradingview-widget-container__widget"&gt;&lt;/div&gt;
    &lt;div class="tradingview-widget-copyright"&gt;&lt;a href="https://www.tradingview.com/markets/cryptocurrencies/prices-all/" rel="noopener" target="_blank"&gt;&lt;span class="blue-text"&gt;Cryptocurrency Markets&lt;/span&gt;&lt;/a&gt; by TradingView&lt;/div&gt;
    &lt;script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-screener.js" async&gt;
    {
    "width": 1000,
    "height": 490,
    "defaultColumn": "overview",
    "screener_type": "crypto_mkt",
    "displayCurrency": "USD",
    "colorTheme": "light",
    "transparency": false,
    "locale": "en"
  }
    &lt;/script&gt;
  &lt;/div&gt;')
  </code></pre>
  
  <p>which work but is not dynamic ... </p>
  
  <p>I expect the output to be the widget with dynamic use.</p>
  
  <p>Would love if someone can point me my mistakes on this :)</p>