Why can't I pass an argument and re-render the SVG?

Question

JavaScript

There is an element in which SVG and a function for determining the width of the window, which sets the width of the SVG
The handleResize function determines the width of the div and assigns a new SVG element with props when changing

//Здесь происходит определение ширины SVG
componentDidMount() {
        var width = this.props.width;
}

//В родителе
handleResize(e) {
        //Не работает, ширина CoreENGChart остается прежней
        this.setState({ chart: <CoreENGChart width={document.getElementById("mydiv").offsetWidth} /> });
        console.log( document.getElementById("mydiv").offsetWidth );//работает, выдает ширину 
}

componentDidMount(){
        window.addEventListener('resize', this.handleResize);
        //Задаем стейт первый раз и все работает
        this.setState({ chart: <CoreENGChart width={document.getElementById("mydiv").offsetWidth } />});
}
'''
render() {
        return (
            <div id="mydiv">
                {this.state.chart}
            </div>
        );
    }

Why might not work?

Answer 1

I don’t know why, but the element without a full reset is not re-rendered
I decided this way, but I would like to understand why

handleResize() {
        this.setState({ chart: '' });
        this.setState({ chart: <CoreENGChart width={document.getElementById("mydiv").offsetWidth} /> });
}

Answer 2

Read about navbars and dropdowns in bootstrap. Everything is very simple with this.

Answer 3

You can try to do it via toggle. as an option. it’s just that it’s most likely that it won’t work with a hover, since this is a mobile phone, and it can close ... but toggle, clicked on the link, the second level opened, clicked on another one, another one opened .. clicked closed