How to destroy a backdraft component from the component that rendered it?

Question

Using backdraftjs...

//  imagine there is another component class called "TheMenu" 

class MenuButton extends Component {
    menuOpen = false;

    toggleMenu = (event) => {
        if (menuOpen) {
            // what goes here? I want to destroy the menu component
        } else {
            render(TheMenu, {}, 'menu_goes_here');
        }     
    };

    bdElements() {
        return e.div({}, 
            e.a({bdAdvise: { 'click': 'toggleMenu' }}, 'Open the Menu'),
            e.div({id: 'menu_goes_here'),
        );
    }
}

Answer 1

The answer above will not leak memory. You can delete this.renderedMenu immediately upon destroy if you want it to be garbage collected immediately...but that probably doesn't matter because a destroyed component instance uses very little memory.

if (menuOpen) {
  this.renderedMenu.destroy();
  delete this.renderedMenu;
} else {
  this.renderedMenu = render(TheMenu, {}, 'menu_goes_here');
}

Answer 2

Actually I think I just figured this out. Add a variable and change toggleMenu to this:

    renderedMenu = null;

    toggleMenu = (event) => {
        if (menuOpen) {
            this.renderedMenu.destroy();
        } else {
            this.renderedMenu = render(TheMenu, {}, 'menu_goes_here');
        }     
    };

I wonder if this leaks memory though?