Trading View widget in React card

Question

Trying to get a TradingView widget into react but nothing is being displayed right now.

I ve tried a couple of different syntaxes following this question: how to to insert TradingView widget into react js which is in script tag link: https://www.tradingview.com/widget/market-overview/

but no luck so far

This is the widget I want to add: 
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div id="tv-medium-widget"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/BITMEX-XBTUSD/" rel="noopener" target="_blank"><span class="blue-text">Bitcoin</span></a> <span class="blue-text">and</span> <a href="https://www.tradingview.com/symbols/BITMEX-ETHUSD/" rel="noopener" target="_blank"><span class="blue-text">Ethereum Quotes</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.MediumWidget(
  {
  "container_id": "tv-medium-widget",
  "symbols": [
    [
      "Bitcoin",
      "BITMEX:XBTUSD|1m"
    ],
    [
      "Ethereum",
      "BITMEX:ETHUSD|1m"
    ]
  ],
  "greyText": "Quotes by",
  "gridLineColor": "rgba(182, 182, 182, 0.65)",
  "fontColor": "rgba(0, 0, 0, 1)",
  "underLineColor": "rgba(60, 120, 216, 1)",
  "trendLineColor": "rgba(60, 120, 216, 1)",
  "width": "100%",
  "height": "100%",
  "locale": "en"
}
  );
  </script>
</div>
<!-- TradingView Widget END -->

and this is what I have done thus far:

// Render a component to display the crypto-currency prices  
class MenuCard extends Component {

    componentDidMount() {
        const script = document.createElement('script');
        script.src = 'https://s3.tradingview.com/tv.js'
        script.async = false;
        script.innerHTML = JSON.stringify({
            "container_id": "tv-medium-widget",
            "symbols": [
                [
                "Bitcoin",
                "BITMEX:XBTUSD|1m"
                ],
                [
                "Ethereum",
                "BITMEX:ETHUSD|1m"
                ]
            ],
            "greyText": "Quotes by",
            "gridLineColor": "rgba(182, 182, 182, 0.65)",
            "fontColor": "rgba(0, 0, 0, 1)",
            "underLineColor": "rgba(60, 120, 216, 1)",
            "trendLineColor": "rgba(60, 120, 216, 1)",
            "width": "100%",
            "height": "100%",
            "locale": "en"
            })
        document.getElementById("myContainer").appendChild(script);
    }

    render() {
        return(
            <div className="canvas_block" id="myContainer">
                <div className="canvas_block_img" >
                        <div className="tradingview-widget-container">
                    </div>
                </div>
            </div>
        )
    }
}

MenuCard.defaultProps = {
    MenuCard: []
}

export default MenuCard;

Currently nothing is being displayed in the screen so the ideal scenario would involve getting the widget to display.

Answer 1

Use https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js as the script source.

Also, following the React documentation, you need to create a ref to access the DOM node like in the code below:

class MenuCard extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    const script = document.createElement('script');
    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js'
    script.async = false;
    script.innerHTML = JSON.stringify({
        "container_id": "tv-medium-widget",
        "symbols": [
            [
            "Bitcoin",
            "BITMEX:XBTUSD|1m"
            ],
            [
            "Ethereum",
            "BITMEX:ETHUSD|1m"
            ]
        ],
        "greyText": "Quotes by",
        "gridLineColor": "rgba(182, 182, 182, 0.65)",
        "fontColor": "rgba(0, 0, 0, 1)",
        "underLineColor": "rgba(60, 120, 216, 1)",
        "trendLineColor": "rgba(60, 120, 216, 1)",
        "width": "100%",
        "height": "100%",
        "locale": "en"
    })
    this.myRef.current.appendChild(script);
  }

  render() {
    return(
    <div className="tradingview-widget-container" ref={this.myRef}>
        <div className="tradingview-widget-container__widget"></div>    
    </div>
    );
  }
}

Here's a working example

Answer 2

Add the script to the end of HTML file.

<body>
...
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
</body>

And modify your code as-

 // Render a component to display the crypto-currency prices  
class MenuCard extends Component {       
componentDidMount() {
            const script = document.createElement('script');
            script.innerHTML = new window.TradingView.MediumWidget({
                "container_id": "tv-medium-widget",
                "symbols": [
                    [
                    "Bitcoin",
                    "BITMEX:XBTUSD|1m"
                    ],
                    [
                    "Ethereum",
                    "BITMEX:ETHUSD|1m"
                    ]
                ],
                "greyText": "Quotes by",
                "gridLineColor": "rgba(182, 182, 182, 0.65)",
                "fontColor": "rgba(0, 0, 0, 1)",
                "underLineColor": "rgba(60, 120, 216, 1)",
                "trendLineColor": "rgba(60, 120, 216, 1)",
                "width": "100%",
                "height": "100%",
                "locale": "en"
                })
            document.getElementById("myContainer").appendChild(script);
        }
    
        render() {
            return(
                <div className="canvas_block" id="myContainer">
                    <div className="canvas_block_img" >
                            <div className="tradingview-widget-container">
                        </div>
                    </div>
                </div>
            )
        }
    }
    
    MenuCard.defaultProps = {
        MenuCard: []
    }
    
    export default MenuCard;