React js remove third party rendered html

I have below code

<div id="parent">  <div id="dvWeather">  {  data && (  thirdparty.renderWeatherInfo(data,"dvWeather")  )  }  <div/>  </div>  

What it does

<div id="parent">  <div id="dvWeather">  <div id="mtWeather">  other stuff  </div>  <div/>  </div>  

So it is working when it data has value, but when I update the data with state to null, it renders but the content of dvWeather does not remove.

But when I do simply this

<div id="parent">  <div id="dvWeather">  {  data && (  <h2>Hello</h2>  )   }  <div/>  </div>  

I can see when data is not null h2 is rendering, if null then blank

Third party is using react react dom to render component in given div

I believe this because dvWeather has been rendered by different reactjs state, so in my project state unable to remove it

What could be the possible issue and work around it

Thanks

https://stackoverflow.com/questions/65948444/react-js-remove-third-party-rendered-html January 29, 2021 at 11:35AM