-2

criei um app de tarefas, adiciono tarefas, e excluo tarefas, tambem preciso editar tarefa criada. como faço essa implementaçao no codigo, para editar tarefas criadas

form.jsx

export default function Form() {

    const [listaTarefas, setListaTarefas] = useState([]);
    const [tarefa, setTarefa] = useState('');

    function addTarefa() {

        if (!tarefa) { // < ---se nao tiver vazio, nao faz nada
            return
        };
        // add novo elemento a lista
        listaTarefas.push({ text: tarefa })
        setListaTarefas(listaTarefas);
        localStorage.setItem('lista_tarefas', JSON.stringify(listaTarefas));
        setTarefa(''); // <--- reseta o valor do input
    }

    // deleta elemento selecionado da lsita
    function deleteTarefa(index) {
        listaTarefas.splice(index, 1);
        setListaTarefas([...listaTarefas]);
        localStorage.setItem('lista_tarefas', JSON.stringify(listaTarefas));
    }


    useEffect(() => {
        if (localStorage.getItem('lista_tarefas') !== null) {
            setListaTarefas(JSON.parse(localStorage.getItem('lista_tarefas')))
        }
    }, []);
return(
        <>
            <h3>Todo-List</h3>

            <hr />
            <input type="text" placeholder="Digite a tarefa" value={tarefa} onChange={(e) => { setTarefa(e.target.value) }} />
                <button onClick={addTarefa}>Adicionar</button>
            <hr />
            {listaTarefas.map((t, index) => {
                return <li key={index}>{t.text}
                    <span
                        onClick={() => { deleteTarefa(index) }}>[remover]
                    </span>
                    <span onClick={() => { editTarefa() }}>[editar]</span>
                </li>
            })};
        </>
    );
};

Atualização do codigo

Atualizei o form, coloquei um input e um botao ao lado de editar, para quando editar, esse botao salve a ediçao.

return (
        <>
            <h3>Todo-List</h3>
            <hr />
            <input type="text" placeholder="Digite a tarefa" value={tarefa} onChange={(e) => { setTarefa(e.target.value) }} />
            <button onClick={addTarefa}>Adicionar</button>
            <input type="text" value={tarefa} onChange={(e) => { setTarefa(e.target.value) }}></input>
            <button >Editar</button>
            <hr />
            {listaTarefas.map((t, index) => {
                return <li key={index}>{t.text}
                    <span
                        onClick={() => { deleteTarefa(index) }}>[remover]
                    </span>
                    <span onClick={() => { openEditTarefa(index) }}>[editar]</span>
                </li>
            })}

        </>
    );
};

Atualização

Coloquei a função

function openEditTarefa(text) {
        // Resgatando o texto da tarefa para mostrar no campo
        const tarefaAtual = listaTarefas[text];
        // Aqui atribui o valor ao estado para que seja mostrado no campo de texto na edição
        setTarefa(tarefaAtual.text);
    }

Aagora estou conseguindo pegar o item e jogar no input so que quando salvo, salvo em um novo item. Oque estou precisando agora, seria jogar esse valor pra editar somente no input do edit, e colocar a funçao de salvar a ediçao no button editar.

4
  • Por favor, esclareça seu problema ou forneça detalhes adicionais a fim de destacar exatamente o que você precisa. Da forma como está escrito atualmente é difícil dizer com exatidão o que você está perguntando.
    – Comunidade Bot
    Commented 13/01/2023 às 19:05
  • criei um app de tarefas, adiciono tarefas, e excluo tarefas, tambem preciso editar tarefa criada. como faço essa implementaçao no codigo, para editar tarefas criadas Commented 13/01/2023 às 19:14
  • @JeffPacheco acho que você vai precisar 1° buscar essa tarefa no localStorage. 2° criar uma tela para listar essa informações. 3° Na listagem criar um botão para direcionar para a tela de edição.
    – William
    Commented 13/01/2023 às 20:04
  • Ja tentou antes de chamar a função saveEditTarefa atualiza a tarefa atual que está sendo editada Commented 17/01/2023 às 20:51

2 Respostas 2

-2

Para adicionar a opção de editar na sua lista de tarefas, será necessário buscar o indice específico em que essa tarefa está, dado a sua estrutura você poderia implementar da seguinte forma:

// index - indice da tarefa que está sendo editada
// value - o novo valor que vai ser utilizado na edição
function editTarefa(index, value) {
  // Busca a lista e atualiza o valor do indice da tarefa
  const listaAtualizada = listaTarefas;
  listaAtualizada[index] = value;
  
  setTarefas(listaAtualizada);
  localStorage.setItem('lista_tarefas', JSON.stringify(listaAtualizada));
}

Assim você terá atualizado o valor do indice especificado e mostrará na lista, porém eu recomendo que você só chame a função apenas ao clicar no botão de salvar para editar a tarefa, você pode utilizar o form que você já tem e apenas alternar a visualização ou adicionar um novo form. Caso você opte por alternar os botões, basta fazer isso:

<>
    <h3>Todo-List</h3>
    <hr />
    <input type="text" placeholder="Digite a tarefa" value={tarefa} onChange={(e) => { setTarefa(e.target.value) }} />
        {isAnEdit ? (
          <button onClick={editTarefa}>Editar</button>
        ) : (
          <button onClick={addTarefa}>Adicionar</button>
        )}
    <hr />
    {listaTarefas.map((t, index) => {
        return <li key={index}>{t.text}
            <span
                onClick={() => { deleteTarefa(index) }}>[remover]
            </span>
            <span onClick={() => { openEditTarefa(index) }}>[editar]</span>
        </li>
    })}
</>

Assim ficaria o form da sua edição caso você opte por alternar as visualização, a função para mostrar o formulário de edição, ele ficaria assim:

// Aqui eu declaro o estado para definir se o form é de uma edição
const [isAnEdit, setIsAnEdit] = useState(false);

function openEditTarefa(index) {
  // Resgatando o texto da tarefa para mostrar no campo
  const tarefaAtual = listaTarefas[index];
  // Aqui atribui o valor ao estado para que seja mostrado no campo de texto na edição
  setTarefa(tarefaAtual.item);
  // Aqui alterna o estado de false para true, para que seja mostrado o form de edição
  setIsAnEdit(true);
}

Acredito que com esse código já vai ser possível implementar a funcionalidade que você precisa.

3
  • Deu alguns problemas. quando clicado no botao de editar que fica lado da lista, nao aparece o item a ser editado la no input. Se digito alguma coisa no input e clico em editar que salvaria essa ediçao no item que estou editando , ele aparece somente [object Object]. E se clicando esse Editar, para salvar a ediçao e tiver 3 items na lista, no input puxa esses objeto, e fica assim la entro do input [object Object],[object Object],[object Object]. Commented 17/01/2023 às 16:42
  • Esta dando esse erro tbm: Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component Commented 17/01/2023 às 16:44
  • Pode ser que em algum ponto do código a sua tarefa não foi convertida de volta utilizando JSON.parse, ele especifica em que linha exatamente está dando o [object Object]?
    – Alef Felix
    Commented 18/01/2023 às 11:53
-3

Citação Deu alguns problemas. quando clicado no botao de editar que fica lado da lista, nao aparece o item a ser editado la no input. Se digito alguma coisa no input e clico em editar que salvaria essa ediçao no item que estou editando , ele aparece somente [object Object]. E se clicando esse Editar, para salvar a ediçao e tiver 3 items na lista, no input puxa esses objeto, e fica assim la entro do input [object Object],[object Object],[object Object]

Esse problema acontece porque o objeto salvo no localStorage foi salvo como um objeto composto nessa parte:

// add novo elemento a lista
listaTarefas.push({ text: tarefa });

No caso é um objeto com o attribute text. Então na obtenção do valor tem que ser objeto.text.

Sobre o processo de edição, você tem que definir como irá realizar o fluxo de alteração.

Ao clicar no botão editar o que deve acontecer? O valor deve ser carregado para o campo de input? Ou se eu digitar um valor no campo input e clicar em editar o valor atualiza o registro da linha?

A segunda opção pode ser feita como o Alef Felix mencionou:

// index - indice da tarefa que está sendo editada
// value - o novo valor que vai ser utilizado na edição
function editTarefa(index, value) {
   // Busca a lista e atualiza o valor do indice da tarefa
   const listaAtualizada = listaTarefas;
   listaAtualizada[index] = { text: value };
   setListaTarefas([...listaAtualizada]);
   localStorage.setItem('lista_tarefas', JSON.stringify(listaAtualizada));
}

Basta passar o index do elemento a ser editado e obter o valor do campo tarefa, conforme:

  <span
      onClick={() => {
      editTarefa(index, tarefa);
      }}
      >[editar]
  </span>
1
  • Muito bem colocado
    – Alef Felix
    Commented 26/01/2023 às 19:35

Você deve fazer log-in para responder a esta pergunta.

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