Neste artigo você aprenderá a como deletar item de array em state no React, ou seja, utilizando o useState em um array
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.