Neste artigo você aprenderá a como deletar item de array em state no React, ou seja, utilizando o useState em um array

deletar item de array em state no React capa

Fala programador(a), beleza? Bora aprender mais sobre React JS!

Manipular estados em React é uma tarefa comum, e muitas vezes, nos deparamos com a necessidade de atualizar arrays que estão armazenados no estado de um componente.

Neste artigo, abordaremos uma das operações mais frequentes: a remoção de um item de um array.

Introdução ao gerenciamento de estados no React

O React proporciona uma maneira eficaz de gerenciar o estado local de um componente por meio do hook useState.

Quando utilizamos arrays como estado, precisamos ter um cuidado especial para não modificar diretamente o estado original, mas sim criar uma cópia dele e então realizar a atualização.

A armadilha da mutabilidade

Em JavaScript, arrays são estruturas de dados mutáveis. Isso significa que, se você tentar deletar um item diretamente do array do estado, você estará modificando o estado diretamente, o que é uma má prática no React.

Em vez disso, sempre trabalhe com uma cópia do estado, e depois atualize o estado com o novo array.

Exemplo prático: Deletando um item de um array

Vamos criar um componente simples que tem um estado com uma lista de tarefas e a capacidade de remover uma tarefa específica.

import React, { useState } from 'react';

const ListaDeTarefas = () => {
    const [tarefas, setTarefas] = useState(['Tarefa 1', 'Tarefa 2', 'Tarefa 3']);

    const removerTarefa = (index) => {
        const novasTarefas = [...tarefas];
        novasTarefas.splice(index, 1);
        setTarefas(novasTarefas);
    }

    return (
        <div>
            <ul>
                {tarefas.map((tarefa, index) => (
                    <li key={index}>
                        {tarefa}
                        <button onClick={() => removerTarefa(index)}>Remover</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default ListaDeTarefas;

Explicando o processo

No exemplo acima, temos uma lista inicial de tarefas. A função removerTarefa é responsável por deletar uma tarefa baseada no índice.

Note que, ao invés de modificar diretamente o array tarefas, criamos uma cópia com [...tarefas].

Em seguida, usamos a função splice para remover o item e, finalmente, atualizamos o estado com o novo array.

Por que não usar o filter?

Uma alternativa ao splice é o método filter. Ele pode ser mais intuitivo quando se deseja remover itens de um array baseado em uma condição:

const removerTarefa = (index) => {
    const novasTarefas = tarefas.filter((_, i) => i !== index);
    setTarefas(novasTarefas);
}

Ambas as abordagens são válidas e a escolha entre elas geralmente se baseia na preferência pessoal ou na especificidade do cenário.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Chegamos ao fim do artigo sobre deletar item de array em state no React!

Manipular arrays no estado do React requer atenção para garantir que não estejamos alterando o estado diretamente.

Seja usando splice ou filter, o importante é trabalhar com uma cópia do estado original e, depois, atualizá-lo. Isso garante que o React possa otimizar as re-renderizações e manter o aplicativo eficiente.

Trabalhar com estados no React pode parecer desafiador no início, especialmente quando estamos lidando com estruturas de dados mais complexas como arrays.

No entanto, com a prática e o entendimento das melhores abordagens para manipular esses dados, o processo se torna intuitivo e eficiente.

Está buscando evoluir como Programador? Confira o nossos cursos de programação.

Inscrever-se
Notificar de
guest

0 Comentários
mais antigos
mais recentes Mais votado
Feedbacks embutidos
Ver todos os comentários