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 aconteceracontece 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>