Fala dev, tudo certo?
Não entendi muito bem a pergunta, vou tentar responder com o que entendi.
Pelo seu código, parece que você dividiu o tarefa em 2 arrays, um com a string da tarefas e outro com a string dos tempos, certo?
Caso seja isso, podemos ter vários problemas como:
- Como conseguimos conectar o tempo a tarefa especifica? Daria para conectar utilizando o index de cada array, mas e se no futuro você quiser mudar a ordem das tarefas ou deletar alguma delas por exemplo?
- Para você saber qual deles está selecionado naquele momento, você vai precisar criar um outro estado utilizando o index do array que você criou (não sei se seria de tarefas ou tempos, você mesmo pode dizer), mas cai no mesmo problema acima. Caso você coloque apenas o index do array, você vai precisar contar que o index seja igual para o array tarefas e para o array tempos, o que pode não acontecer.
- Como você vai saber qual tarefa foi concluída? Se existe apenas o array tarefas e tempos e os dois guardam strings, se você remover a tarefa concluída dos dois arrays ela não aparecerá na tela mais, então você precisaria de um terceiro array como "concluidas" por exemplo, só para guardar quais tarefas foram concluídas, e caso seja um array com os index das tarefas, cai no mesmo problema do primeiro ponto.
- Uma forma de resolver o problema do index é criando um id com a biblioteca uuid, mas para guardar a informação precisamos transformar o array de tarefas em um objeto.
Com o array de objetos como tratado no curso, temos benefícios como:
- O estado está unificado, evitando problemas como duplicidade de estados e manutenção (como saber qual está selecionado ou concluído).
- Como mudamos apenas um estado, caso o código escale, o estado mudado deve atualizar a tela apenas uma vez, com vários estados, um código pode facilmente gerar problemas de performance.
- Podemos adicionar o id com um array de objetos, que cria uma informação única para cada tarefa, permitindo então que saibamos a diferença entre cada tarefa sem depender de index ou strings que podem ser iguais.
Subi o código do curso na Vercel especificamente para a sua dúvida e ele parece funcionar como esperado, confere aqui: https://alura-studies-lfrprazeres.vercel.app/
Se você estiver com dificuldade de replicar, pega o código no meu Github: https://github.com/lfrprazeres/alura-studies
OBS: se for clonar o repositório, o node tem que estar na versão 16 ou menor.
Se você estiver tendo problemas com manipulação de arrays de objetos, te recomendo um curso específicamente sobre arrays que existe na plataforma.
Curso sobre arrays: https://cursos.alura.com.br/course/javascript-arrays
Também tem um artigo falando sobre desestruturação de objetos, que é algo bem comum no meio Javascript: https://www.alura.com.br/artigos/es6-desestruturando-objetos
Caso eu não tenha respondido a sua dúvida e queira elaborar depois fique a vontade que eu respondo novamente!
Bons estudos!