I need ReactDOM.render to render each time its called

September 13, 2023

I am working on an app that will be going inside another web application. I need ReactDOM.render to re-render my app each time the focus function is called. Right now it only renders it once but then each time after that it does not re-render it. Focus is called each time a user enters my app, so I need react to re-render each time to stay updated.

focus: function (freshApi, freshState) {
      // show main content
      // elAddin.className = elAddin.className.replace('hidden', '').trim();
      console.log('test');
      var elAddin = document.getElementById('customFuelTracker');
      ReactDOM.render(<App geotabApi={freshApi} geotabState={freshState} appName={'customFuelTracker'} />, elAddin);    
    },

I’ve tried erasing the innerHTML of the container on exit, but that still requires a page refresh to reload react.

>Solution :

Try unmountComponentAtNode

focus: function (freshApi, freshState) {
      // show main content
      // elAddin.className = elAddin.className.replace('hidden', '').trim();
      console.log('test');
      var elAddin = document.getElementById('customFuelTracker')
      ReactDOM.unmountComponentAtNode(elAdmin)
      ReactDOM.render(<App geotabApi={freshApi} geotabState={freshState} appName={'customFuelTracker'} />, elAddin);    
    },