Chart update in TradingView React component doesn't work

Question

Symbol of the chart is being selected in another component with an update of state which is passed back as a prop to this TradingView component.

I am trying to change the symbol in the chart with this:

this.tvWidget.chart().setSymbol('BINANCE:' + this.props.selectedSymbol.name)

But where and how exactly should I place and use it? I am confused.

I need to change the chart symbol, but in what method should it happen? Thank you!

import * as React from 'react';
import './index.css';
import {widget} from '../../charting_library/charting_library.min';
import {setSymbol} from "../../store/actions/symbols";
import {connect} from "react-redux";

class TradingView extends React.PureComponent {
    tvWidget = null;
    widgetOptions = {
        client_id: 'tradingview.com',
        user_id: 'public_user_id',
        datafeed: new window.Datafeeds.UDFCompatibleDatafeed('https://demo_feed.tradingview.com'),
        charts_storage_url: 'https://saveload.tradingview.com',
        symbol: "AAPL",
        symbol: this.props.selectedSymbol ? this.props.selectedSymbol.name : "BTCUSDT",
        snapshot_url: "https://www.tradingview.com/snapshot/",
        enabled_features: ['study_templates'],
        studies: ["RSI@tv-basicstudies", "StochasticRSI@tv-basicstudies", "MACD@tv-basicstudies"],
        watchlist: ["BINANCE:BTCUSDT"],
        disabled_features: ['use_localstorage_for_settings'],
        library_path: '/charting_library/',
        charts_storage_api_version: '1.1',
        container_id: 'tv_chart_container',
        debug: false,
        interval: 'D',
        theme: "Dark",
        allow_symbol_change: true,
        auto_save_delay: '5',
        range: "6m",
        hide_legend: true,
        locale: "en",
        timezone: "Europe/Berlin",
        autosize: true,
        enable_publishing: true,
    };
    componentDidMount() {
        this.tvWidget = new widget(this.widgetOptions);
        let tvWidget = this.tvWidget

        tvWidget.onChartReady(() => {
            tvWidget.headerReady().then(() => {
                let chart = tvWidget.chart();
                chart.onSymbolChanged().subscribe(null, onChartSymbolChanged);
            })
        })

        let setSymbol = this.props.setSymbol
        let symbols = this.props.symbols

        function onChartSymbolChanged() {
            let chart = tvWidget.chart();
            console.log("onChartSymbolChanged changing symbol to " + chart.symbol());
            setSymbol(symbol)         
        }
    }

    componentWillUnmount() {
        if (this.tvWidget !== null) {
            this.tvWidget.remove();
            this.tvWidget = null;
        }
    }

    render() {

        this.tvWidget && this.tvWidget.symbol ? this.tvWidget.chart().setSymbol('BINANCE:' + this.props.selectedSymbol.name) : null

        return (
            <div
                id="tv_chart_container"
                className={'TVChartContainer'}
            />
        );
    }
}

const mapStateToProps = state => {
    return {
        symbols: state.symbols.symbols,
        selectedSymbol: state.symbols.selectedSymbol
    };
};

const mapDispatchToProps = {setSymbol}
export default connect(mapStateToProps, mapDispatchToProps)(TradingView);

Answer 1

I made it work by removing the chart whenever the pair changes. I don't know this the most optimized way or not.

function TradingView(props) {
  const { pair } = props;
  const tv = useRef(null);

  useEffect(() => {
    if (tv.current) tv.current.remove();

    tv.current = new window.TradingView.widget({ symbol: pair });
  }, [pair]);

  return <div id="trading_view_chart" />;
}

Answer 2

You can check the props by passing prevPops in componentDidUpdate(prevProps) {} and check the changes.