Ao gerar as tags, por que usar o método .map() e não .forEach()?

Oi, Jéssica!

Então, quando você está trabalhando com React, muitas vezes você vai querer renderizar listas de elementos. Para isso, você pode usar métodos como .map() e .forEach() para percorrer um array, mas eles funcionam de maneiras um pouco diferentes.

• .map():

O método .map() percorre cada elemento de um array e executa uma função que você passa para ele. Importante: ele retorna um novo array com os resultados dessa função. Isso é perfeito para o JSX, pois você pode transformar cada item do seu array original em um elemento JSX.

Exemplo:

const numeros = [1, 2, 3];
return (
  <div>
    {numeros.map(numero => <p>{numero}</p>)}
  </div>
);
 

No exemplo acima, para cada número no array numeros, .map() está criando um novo parágrafo <p> com aquele número, e retorna um novo array com esses elementos <p>.

• .forEach():

O método .forEach() também percorre cada elemento de um array, e executa uma função que você passa para ele.

Mas, ao contrário do .map(), o .forEach() não retorna um novo array. Ele só executa a função em cada item. Isso pode causar problemas se você tentar usar .forEach() dentro do JSX, porque ele não retorna nada para ser renderizado. Exemplo:

const numeros = [1, 2, 3];
return (
  <div>
    {numeros.forEach(numero => <p>{numero}</p>)} 
    {/* Isso não vai renderizar nada! */}
  </div>
);
 

Então, Jessica, nós usamos o .map() em vez do .forEach() dentro do JSX porque o .map() retorna um novo array de elementos JSX que podem ser renderizados, enquanto o .forEach() não retorna nada e, por isso, não renderiza os elementos como queremos.

Espero que isso tenha ajudado a esclarecer um pouco! Se tiver mais alguma dúvida, fique à vontade para perguntar.

Entendi! Obrigada pela resposta, muito detalhada e sanou minha dúvida. :)

Se não for pedir demais, pode dar um exemplo em que o .forEach() seria utilizado?