render() is not getting called after UI changes programmatically

[ankushbkadam]

I am creating a toggled UI It will toggle between headers original UI and my custom UI depend upon a global variable's value.

So I created a block setting to toggle in between

So initially block will have only header element, UI1: <h2></h2>

after toggled it should be like UI2:

<div class="newWrapper">
    <h2></h2>
    <div>my contents here</div>
</div>

after implementing this, it is working fine at first, but not toggling back later.

initially, UI1 is getting rendered then after toggling, UI2 is getting rendered but after toggling again it should go back to UI1 but in this case, render is not getting called again and UI2 is always getting rendered.

In this scenario render is not getting called again in order to render new UI with conditions, is there any solution?

Following is the way I implemented it:

I have taken a global variables: One to hold the anchorEditorWrapper toggle state which will be false initally this._showAnchorEditor =false;` and a wrapper div this.wDiv = this.getUI();`

So my render() method will be,

render() {
    return this.wDiv;
}

I have written a getUI() method, which will return appropriate UI depending on global flag variable as,

getUI(){
 return this._showAnchorEditor ? this.getWdiv() : this._element;
}

this._showAnchorEditor will be toggled using the block actions button. this button will then call show() or hide() methods depend on this._showAnchorEditor variable state

In show() or hide() methods, I get new UI by using getUI() method and re-assign it to the global variable this.wDiv

showAnchorEditor() {
    this._showAnchorEditor = true;

   //create new UI
    const newWDiv = this.getUI();
    this.wDiv.parentNode.replaceChild(newWDiv, this.wDiv);
}

hideAnchorEditor() {
    this._showAnchorEditor = false;
    const newWDiv = this.getUI();
    this.wDiv.parentNode.replaceChild(newWDiv, this.wDiv);
    this.wDiv = newWDiv;
  }