Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

map() ou forEach()

Olá, pessoal!

Eu testei usando forEach(), visto que este método percorre a lista. Mas, não renderizou na tela o resultado.

export class ListaDeNotas extends Component {
    render() {
        return (
            <ul>
                {Array.of("Trabalho", "Trabalho", "Estudos").forEach((item) => {
                    return (
                        <li>
                            <div>{item}</div>
                            <CardNota />
                        </li>
                    );
                })}
            </ul>
        );
    }
}

Por que o map() funciona e forEach() não funciona, visto que estamos apenas percorrendo a lista e fazendo algo para cada item do Array?

2 respostas
solução!

Oi Clerverson, tudo certo?

O forEach()percorre uma lista, portanto não conseguimos adicionar novos itens com ele (e o que queremos adicionar é um elemento <li> para cada item do array). O forEach() sempre retornará undefined, por isso não conseguimos retornar um bloco de código HTML, como você está tentando fazer.

Já o map(), retorna um array de itens, que é o caso mais indicado, já que queremos adicionar novos itens na nossa renderização.

Espero ter ajudado =) Qualquer outra dúvida estou à disposição, bons estudos!

Obrigado Giovanna!