Entrar Ainda não tem acesso?
1
resposta

De onde o código está pegando o valor de "tarefa" para jogar no forEach?

Referente ao curso JS na Web: Armazenando dados no navegador, no capítulo Renderizando a lista e atividade Exibindo tarefas

por Estudante
| 75.4k xp | 46 posts

Não entendi de onde o código está pegando o valor de "tarefa" no forEach e no parâmetro da function "Tarefa(tarefa)".

Analisei o código e o único lugar em que há declaração de uma variável chamada "tarefa" é no módulo "criaTarefa", dentro da function "Tarefa = ({ valor, dataFormatada })":

export const Tarefa = ({ valor, dataFormatada }) => {

    const tarefa = document.createElement('li')
    tarefa.classList.add('task')
    const conteudo = `<p class="content">${dataFormatada} * ${valor}</p>`

    tarefa.innerHTML = conteudo

    tarefa.appendChild(BotaoConclui())
    tarefa.appendChild(BotaoDeleta())

    return tarefa

}

Mas const é uma variável de escopo local e, portanto, não poderia ser acessada fora da função onde foi declarada. Além do mais, não vi sentido em pegar o return da function Tarefa para usar como parâmetro dela mesma na declaração do forEach.

const carregaTarefa = function () {
    //Selecionar o elemento <ul class="list" data-list>
    const lista = document.querySelector('[data-list]')

    //Pegar as tarefas que estão armazenadas no localStorage.
    //localStorage.setItem('tarefas', JSON.stringify(tarefasAtualizadas))
    const tarefasCadastradas = JSON.parse(localStorage.getItem('tarefas')) || []

    tarefasCadastradas.forEach((tarefa) => {
        lista.appendChild(Tarefa(tarefa))
    })
}
1 resposta
por Giovanna Moeller
| 626.1k xp | 892 posts
Instrutor

Oi Bruno, tudo bem?

O componente Tarefa é responsável por criar uma tarefa única, por isso que recebemos como parâmetro o valor (texto) e a data formatada. Com esses valores, criamos um elemento de lista (li) para cada tarefa. É exatamente isso que a const tarefa está fazendo, criando um elemento de lista e colocando como conteúdo o valor (o texto da tarefa) e a sua data. É isso que o componente Tarefa está fazendo.

Realmente const não pode ser alterado, porém nos retornamos essa tarefa criada, por isso que quando chamamos o lista.appendChild(Tarefa(tarefa)), ele consegue inserir na lista o elemento, pois estamos retornando-o do componente Tarefa.

Além disso, essa variável tarefa do lista.appendChild não tem relação com a variável tarefa do componente Tarefa.

Por isso que quando recuperamos as tarefas cadastradas no localStorage, nós mandamos cada uma delas para o componente Tarefa, para renderizar e exibir na tela. É isso que o código abaixo faz:

const carregaTarefa = function () {
    const lista = document.querySelector('[data-list]')

    const tarefasCadastradas = JSON.parse(localStorage.getItem('tarefas')) || []

    tarefasCadastradas.forEach((tarefa) => {
        lista.appendChild(Tarefa(tarefa))
    })
}

Seleciona a lista inteira, recupera os dados do localStorage e insere cada um desses dados (elementos da lista, que serão renderizados pelo componente Tarefa) dentro dessa lista. O método forEach percorre todo o array de tarefas encontradas no localStorage.

Espero ter ajudado =)