Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Sugestão] Na minha opinião ...

O método .map é uma função de array que recebe uma função de callback como argumento e retorna um novo array com os valores resultantes da aplicação dessa função em cada elemento do array original. Esse novo array pode ser utilizado para renderizar os elementos desejados no componente React.

Por outro lado, o método .forEach não retorna nada, apenas executa uma função de callback para cada elemento do array original. Embora seja possível renderizar elementos com o método .forEach, isso exigiria a manipulação de variáveis externas ou do estado do componente, o que tornaria o código mais complexo e difícil de ler.

Portanto, o método .map é preferível ao .forEach para renderizar listas de elementos em componentes React, porque é mais simples e direto, e permite que o código seja mais legível e fácil de entender.

1 resposta
solução!

Salve, Jefferson!

Exatamente isso, renderizar listas com .forEach mais fica verboso:

const lista = ["Item 1", "Item 2", "Item 3"];

const ListaDeItems = () => {
  const listaDeElementos = [];

  lista.forEach((item) => {
    listaDeElementos.push(<li key={item}>{item}</li>);
  });

  return <ul>{listaDeElementos}</ul>;
};

Enquanto com o .map:

const lista = ["Item 1", "Item 2", "Item 3"];

const ListaDeItems = () => {
  return (
    <ul>
      {lista.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
};