RALF LIMA - TREINAMENTOS EM TI

15 - Activity

Nesta aula, vamos aprender a utilizar o componente Activity em conjunto com o useState. O Activity permite controlar a visibilidade de conteúdos na tela de forma simples e organizada.

O que é o Activity?

O Activity é um componente utilizado para controlar se um conteúdo estará visível ou oculto. Ele recebe a propriedade mode, que define o estado de exibição.

Os valores mais comuns são:

visible: o conteúdo será exibido
hidden: o conteúdo ficará oculto

Exemplo prático utilizando Activity

No exemplo abaixo, utilizamos um botão para alternar a visibilidade de um conteúdo:


// Importação
import { Activity, useState } from "react";

// Componente
function Container(){

    // State
    const [visivel, setVisivel] = useState(true);

    // Função para intercalar o valor do state visivel
    function alterarVisibilidade () {
        setVisivel(valorAtual => !valorAtual);
    }

    // Retorno
    return(
        <>
            <button onClick={alterarVisibilidade}>
                Clique aqui
            </button>

            <Activity mode={visivel ? "visible" : "hidden"}>
                <h1>Aprendendo a utilizar o Activity</h1>
            </Activity>
        </>
    );
}

// Exportar
export default Container;

Entendendo o código

Utilizamos o useState para criar o estado visivel
O botão chama a função alterarVisibilidade
A função alterna o valor entre true e false
O Activity recebe o mode com base no valor do state

Por que usar a função no setState?

Observe este trecho:


setVisivel(valorAtual => !valorAtual);

Esse formato garante que o React utilize sempre o valor mais atualizado do estado, evitando problemas em atualizações consecutivas.

Essa é uma boa prática sempre que o novo valor do state depende do valor anterior.

Dicas importantes

O Activity é ideal para controle de exibição de conteúdo
Utilize useState para controlar estados de visibilidade
Prefira a função no setState quando for alternar valores

Agora você já sabe como controlar a exibição de conteúdos utilizando Activity no React.