Spring e React - 2026

29 - Remover

Nesta etapa, vamos implementar a funcionalidade de Remover, que permite excluir uma pessoa da API e da lista de pessoas no frontend.

Criamos a função remover, que envia uma requisição DELETE para a API para excluir a pessoa selecionada:

// Remover
const remover = () => {
    fetch("http://localhost:8080/remover/"+pessoa.id, {
        method: "DELETE"
    })
    .then(() => {
        setPessoas(pessoas.filter(obj => obj.id !== pessoa.id));
        cancelar();
    });
}

Explicando o código:

• fetch("http://localhost:8080/remover/"+pessoa.id) – envia uma requisição DELETE para a API, passando o ID da pessoa a ser removida.
• setPessoas(pessoas.filter(...)) – atualiza a lista de pessoas, removendo a pessoa excluída do estado.
• cancelar() – limpa o formulário e retorna ao estado de cadastro, para que o formulário não fique com dados de uma pessoa removida.

Passamos a função remover para o componente Formulario:

<Formulario remover={remover} />

Dentro do componente, associamos a função ao botão Remover:

<input type="button" onClick={remover} value="Remover" className="btn btn-primary" />

Com isso, ao clicar no botão Remover, a pessoa selecionada será excluída da API e da lista no frontend, e o formulário será resetado.

No vídeo abaixo, mostro como implementar a funcionalidade de remoção de dados e garantir que a interface da aplicação se mantenha consistente após a exclusão.