Spring e React - 2026

23 - Visibilidade dos botões

Nesta etapa, vamos trabalhar com a visibilidade dos botões do formulário, permitindo alternar entre as ações de cadastrar, alterar, remover e cancelar.

Para isso, criamos um estado chamado botaoCadastrar, que será responsável por controlar qual conjunto de botões será exibido na tela:

// Hook useState
const [pessoas, setPessoas] = useState([]);
const [botaoCadastrar, setBotaoCadastrar] = useState(true);

Em seguida, passamos esse estado como propriedade para o componente Formulario:

<Formulario botao={botaoCadastrar} />

Dentro do componente, utilizamos uma renderização condicional para alternar os botões:

{
    botao
    ?
        <input type="button" value="Cadastrar" className="btn btn-primary" />
    :
    <>
        <input type="button" value="Alterar"  className="btn btn-primary" />
        <input type="button" value="Remover"  className="btn btn-primary" />
        <input type="button" value="Cancelar" className="btn btn-primary" />
    </>
}

Funcionamento:

• Quando botaoCadastrar for true, será exibido apenas o botão Cadastrar.
• Quando for false, serão exibidos os botões Alterar, Remover e Cancelar.

Essa lógica será muito importante para controlar o fluxo da aplicação, especialmente quando o usuário selecionar um registro da tabela para edição.

No vídeo abaixo, mostro como implementar essa lógica e alternar os botões de forma dinâmica no formulário.