Best way to remove a backdraft component?

Question

I have a backdraftjs component that displays a message. When you click it I want it to go away. How should I make it go away?

class QuickMessage extends Component {
  bdElements() {
    return e.div(
      {className: 'quick_message', bdAdvise: {click: 'dismissMe'}}, 
      this.kwargs.message
    );
  }

  dismissMe() {
    // what should go here ? should it just remove the dom element or
    // will that leave code hanging around?
  }
}

method that displays the error inside #someDomId:

reportError = (errmsg) => render(QuickMessage, {message: errmsg}, "someDomId");

Answer 1

You should call destroy:

dismissMe() {
    this.destroy();
}

The documentation says:

Destroy all resources and references owned by the instance, thereby making the instance readily available for garbage collection. In particular, the following is accomplished:

• Unrenders the instance (if rendered) and destroys all resources (DOM nodes, event connections, etc.) acquired during the time the component was rendered.
• Destroys all watchers on instance properties.
• Destroys all handlers on instance events.
• Destroys all Destroyable instances published to own.
• Deletes this.kwargs.

This is the most you can expect to happen in terms of cleanup. The next time you call reportError a new instance of your component will be created.