0

Estou criando um TODO, armazenar uma lista. Quero excluir 1 item da lista tabem, quando clico em excluir ele excluir todo o array, zerando tudo. como faço para exlcuir somente item que clico em deletar.

const [nome, setNome] = useState("");



    let form = new Array();

    if (localStorage.hasOwnProperty("tarefas")) {
        form = JSON.parse(localStorage.getItem("tarefas"))

    }
    const salvar = (tarefa) => {
        form.push({ item: tarefa })
        localStorage.setItem("tarefas", JSON.stringify(form));
    };

    const deletar = (tarefa) => {
        form.splice({ item: tarefa })
        localStorage.setItem("tarefas", JSON.stringify(form));
    };


    return (
        <>
            <div>
                <h1>Tarefa</h1>
                <form id="tarefa">
                    <input typeof="text" value={nome} onChange={(e) => setNome(e.target.value)}></input>
                    <button onClick={() => salvar(nome)}>Salvar</button>
                </form>
            </div>
            <ul> {form.map(x =>
                <li>  {x.item} 
                   <button onClick={() => deletar(nome)}>Deletar</button>
                </li>)}
                
            </ul>
        </>
    );
0

1 Resposta 1

-1

Dado a sua estrutura, acredito que existam duas possíveis soluções que você poderia implementar no seu código e vou explicá-las.

Solução 1: Método splice

Existe um método no JS para Arrays chamado .splice(), basicamente ele permite que você remova itens baseado nos indices e a quantidade de elementos para serem removidos do Array. No seu caso, você poderia usar esse mesmo método para remover o seu elemento do array fazendo da seguinte forma:

const deletar = (tarefa) => {
        const tarefas = JSON.parse(localStorage.getItem("tarefas"));
        const indiceTarefa = tarefas.findIndex((tarefaAtual) => {
          return tarefaAtual.item === tarefa;
        });
      
        // Aqui estou passando para o splice qual indice ele vai remover e quantos elementos vai remover, no caso será apenas 1
        tarefas.splice(indiceTarefa, 1);
        localStorage.setItem("tarefas", JSON.stringify(tarefas));
};

Assim o array te elementos irá eliminar a tarefa e armazenar no localStorage como devido.

Solução 2: Método filter

Existe também um método no JS para tratativa de arrays chamado .filter(), ele consiste em retornar um array baseado em um critério condicional que deve ser satisfeito por cada um dos seus elementos. No seu caso, a implementação poderia ser aplicada dessa forma:

const deletar = (tarefa) => {
  const tarefas = JSON.parse(localStorage.getItem("tarefas"));
  // Aqui estou dizendo que o array retornará todos os elementos do array que não tem item com o valor da tarefa especificada no atributo item
  const tarefasFiltradas = tarefas.filter((tarefaAtual) => {
    return tarefaAtual.item !== tarefa;
  });

  localStorage.setItem("tarefas", JSON.stringify(tarefas));
};

Aqui estão também os links de documentação de cada método, caso queira se aprofundar no funcionamento:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .