Sobes.tech
Junior

O que é usado para exibir uma lista de dados em JSX?

sobes.tech IA

Resposta da IA

Para exibir uma lista de dados em JSX, utiliza-se o método .map() dos arrays do JavaScript.

// Exemplo de array de dados
const items = ['Item 1', 'Item 2', 'Item 3'];

// Exibir lista usando .map()
const List = () => (
  <ul>
    {items.map((item, index) => (
      // É obrigatório usar uma chave única para cada elemento da lista
      <li key={index}>{item}</li>
    ))}
  </ul>
);

map() percorre cada elemento do array e retorna um novo array de elementos React, que são então renderizados no DOM. É importante usar uma propriedade key única para cada elemento na lista. Isso ajuda o React a atualizar a interface de forma eficiente ao alterar a lista. Como key, pode-se usar um identificador único dos dados, ou, na sua ausência, o índice do elemento no array.