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.