returning null in conditional rendering does not hide previously rendered dialog

[jeppeArchidraw]

I'm showing dialogs for difference messages in a message handler component.

class MessageHandler extends Component {
  ...
 render() {
  switch(this.props.message) {
    case A:
      return getDialogA();
    case B:
      return getDialogB();
    default:
      return null;
  }
}

Several issues arise in the following scenario:

1. set message to A -> dialog A pops up
2. set message to sth other than covered cases -> dialog A DOES NOT disappear
3. set message to B -> dialog B pops up BUT on top of the last dialog(dialog A)
4. when I hide dialog B by pressing a button, dialog box is gone but overlay of the last dialog is still there.

I think the cause is that rendering null does not hide previously rendered dialog. though I checked that dialog A is unmounted on rendering null.

Is this expected or erratic?

[shanekoss]

same issue here - any workaround?