[REACT] RowExpander component deletion

[larissa.maia]

Hello,

I have a React component being rendered in the rowExpander using the createPortal from react-dom, similar to this:

rowExpanderFeature: {
      renderer: async ({ record, region, expanderElement }) => {
          expanderElement.innerHTML = ''
          const key = `${record.id.toString()}__${region}`
          const reactContainer = document.createElement('div')
          reactContainer.style.width = '100%'
    	  reactContainer.style.height = '320px'
     

      expanderElement.append(reactContainer)
      createPortal(<MyComponent/>, reactContainer, key)
        
      return document.createElement('div')
    }
  },
},

and that works fine, additionally I'm using the rowCollapse event listener to remove the created element from the DOM when the row is collapsed.

The issue with this approach is that we have a functionally that triggers a full page reload. If that reload is triggered with the row still expanded, the element is never removed from the DOM causing my app to crash trying to render it (before the scheduler is even initialized).

Is that a workaround for this? Maybe a different way of displaying the react component without having to create new elements in the DOM?

[larissa.maia]

And just a heads up, I can't post into the premium support even though I have a active license in the customerzone, keep getting the warning saying I need to renew my subscription.

[mats]

Your license does not currently include Premium support. Please reach out to sales@bryntum[.]com if you want to add this to your license.

[marcio]

Hey larissa.maia,

Thanks for reaching out.

To address the issue of the component not being removed from the DOM on a full page reload, you might consider using a cleanup function within your component or scheduler setup. You can leverage React's useEffect hook to perform cleanup when the component unmounts. Here's a basic example:

useEffect(() => {
  return () => {
    // Cleanup code here
    const element = document.getElementById('your-element-id');
    if (element) {
      element.remove();
    }
  };
}, []);

This ensures that when the component is unmounted, any DOM elements created are removed, preventing crashes on reload.

Regarding displaying the React component without creating new DOM elements, you might explore using React's state management to conditionally render components based on the scheduler's state, rather than directly manipulating the DOM.