1
resposta

Como mostrar ou esconder um componente no react?

Suponhamos que eu tenha um componente dentro do meu App, gostaria que ficasse oculto e fosse exibido somente quando o usuário clicasse em um botão.

Me parece algo simples mas após ver alguns exemplos ainda não estou pegando como de fato isso é feito.

1 resposta

Fala aí Leandro, isso pode ser feito de N maneiras, a mais simples é:

No componente pai, cria um state para mostrar ou não o o componente:

state = {
    mostrarComponente: false;
}

Por padrão será false, assim o mesmo não será visível.

Feito isso, crie uma handle function para quando o click do botão for feito, você o valor paratrue`:

handleClick() {
    this.setState({
        mostrarComponente: true
    });
}

Lembre de fazer o bind da função no construtor:

constructor() {
    this.handleClick = this.handleClick.bind(this);
}

Agora, dentro do seu render, coloque uma condição de renderização:

{ this.state.mostrarComponente && <MeuComponente/> }

Isso deve resolver e fazer o que você precisa:

Obs: Daria para deixar o código mais simples e mais atualizado com recursos novos do JavaScript, mas nesse momento, tente fazer assim.

Espero ter ajudado.