How do I set the 'visible' watchable on a backdraftjs subcomponent?

Question

It appears that the watchable property 'visible' is handled specially and actually hides the component if it is false or unset. I am trying to toggle it with something like the following:

class ShowMessageButton extends Component {                
    showTheInfo() {
        this.secretMsg.visible = true;
    }
    
    bdElements() {
        return e.div(
            {bdAdvise: {click: 'showTheInfo'}},
            'Click Me to see the Secret Message',
            e(SecretMessage, {bdAttach: 'secretMsg'})
        );
    }
}

class SecretMessage extends Component.withWatchables('visible') {
    bdElements() {
        return e.div({}, 'You clicked! The secret message is "abracadabra"')
    }
}

The code in showTheInfo() is what I would use to set any other watchable property in SecretMessage but it does not seem to change visible. What is up with that? Do I need some kind of bdReflect setting in SecretMessage?

Answer 1

Visible is indeed a predefined property; see https://backdraftjs.org/docs.html#bd-core.classes.Component.visible