Eu implementei um componente Modal que mostra uma caixa de diálogo modal na tela. Normalmente, o modal será exibido condicionalmente. Existem duas maneiras de fazer isso na função de renderização:

render(){
    ...
    <Modal show={this.state.showModal}>
        // something in modal
    </Modal>
}

No componente Modal, eu uso this.props.show para adicionar uma classe diferente a si mesma. Quando isso é falso, ele adiciona uma exibição: none para ocultar o modal.

Outra maneira é assim:

render(){
    ...
    { this.state.showModal &&
        (<Modal>
            // something in modal
        </Modal>)
    }
}

Isso usashowModal para decidir se deve ou não adicionar o Modal na renderização.

O que eu quero descobrir é:

Qual é a diferença entre essas duas maneiras?Um deles é melhor que o outro?Há outra maneira de fazer isso?

EDIT: Parece que pessoas diferentes têm preferências diferentes. Para mim, eu prefiro o que o @ErikTheDeveloper disse. A capacidade de mostrar / ocultar o Modal deve manter-se dentro do Modal e, quando não precisamos mostrar o Modal, podemos retornar nulo no Modal.

Acho que talvez não haja uma resposta certa para qual caminho é melhor. Talvez seja apenas uma escolha pessoal?