Renderizando Listas
Você frequentemente desejará exibir vários componentes semelhantes a partir de uma coleção de dados. Você pode usar osmétodos de array do JavaScriptpara manipular um array de dados. Nesta página, você usaráfilter() e map()com React para filtrar e transformar seu array de dados em um array de componentes.
Você aprenderá
- Como renderizar componentes a partir de um array usando o
map()do JavaScript - Como renderizar apenas componentes específicos usando o
filter()do JavaScript - Quando e por que usar chaves do React
Renderizando dados de arrays
Digamos que você tenha uma lista de conteúdo.
A única diferença entre esses itens da lista é seu conteúdo, seus dados. Você frequentemente precisará mostrar várias instâncias do mesmo componente usando dados diferentes ao construir interfaces: desde listas de comentários até galerias de imagens de perfil. Nessas situações, você pode armazenar esses dados em objetos e arrays JavaScript e usar métodos comomap() e filter()para renderizar listas de componentes a partir deles.
Aqui está um breve exemplo de como gerar uma lista de itens a partir de um array:
- Movaos dados para um array:
- Mapeieos membros de
peopleem um novo array de nós JSX,listItems:
- Retorne
listItemsdo seu componente envolvido em uma<ul>:
Aqui está o resultado:
Observe que o sandbox acima exibe um erro no console:
Console
Aviso: Cada filho em uma lista deve ter uma prop “key” única.
Você aprenderá como corrigir esse erro mais adiante nesta página. Antes de chegarmos a isso, vamos adicionar alguma estrutura aos seus dados.
Filtrando arrays de itens
Esses dados podem ser estruturados ainda mais.
Digamos que você queira uma maneira de mostrar apenas pessoas cuja profissão seja'chemist'. Você pode usar o métodofilter()do JavaScript para retornar apenas essas pessoas. Este método recebe um array de itens, passa-os por um “teste” (uma função que retornatrueoufalse), e retorna um novo array apenas com os itens que passaram no teste (retornaramtrue).
Você quer apenas os itens ondeprofession é 'chemist'. A função de “teste” para isso se parece com(person) => person.profession === 'chemist'. Veja como juntar tudo:
- Crieum novo array apenas com as pessoas “químicas”,
chemists, chamandofilter()empeoplefiltrando porperson.profession === 'chemist':
- Agoramapeiesobre
chemists:
- Por fim,retorneos
listItemsdo seu componente:
Armadilha
As arrow functions retornam implicitamente a expressão logo após=>, então você não precisou de uma instruçãoreturn:
No entanto,você deve escreverreturnexplicitamente se o seu=>for seguido por uma{chave!
Arrow functions que contêm=> {são ditas ter um“corpo de bloco”.Elas permitem que você escreva mais de uma linha de código, mas vocêtem queescrever uma instruçãoreturnvocê mesmo. Se você esquecer, nada será retornado!
Mantendo os itens da lista em ordem comkey
Observe que todas as sandboxes acima mostram um erro no console:
Console
Aviso: Cada filho em uma lista deve ter uma prop “key” única.
Você precisa dar a cada item do array umakey— uma string ou um número que o identifique de forma única entre os outros itens desse array:
Nota
Elementos JSX diretamente dentro de uma chamadamap()sempre precisam de keys!
As keys informam ao React a qual item do array cada componente corresponde, para que ele possa combiná-los mais tarde. Isso se torna importante se os itens do seu array podem se mover (por exemplo, devido a ordenação), serem inseridos ou excluídos. Umakeybem escolhida ajuda o React a inferir o que exatamente aconteceu e fazer as atualizações corretas na árvore DOM.
Em vez de gerar keys dinamicamente, você deve incluí-las em seus dados:
Onde obter suakey
Diferentes fontes de dados fornecem diferentes fontes de chaves:
- Dados de um banco de dados:Se seus dados vêm de um banco de dados, você pode usar as chaves/IDs do banco, que são únicos por natureza.
- Dados gerados localmente:Se seus dados são gerados e persistidos localmente (ex.: notas em um aplicativo de anotações), use um contador incremental,crypto.randomUUID()ou um pacote comouuidao criar os itens.
Regras das chaves
- As chaves devem ser únicas entre irmãos.No entanto, é aceitável usar as mesmas chaves para nós JSX em arraysdiferentes.
- As chaves não devem mudarou isso derrota seu propósito! Não as gere durante a renderização.
Por que o React precisa de chaves?
Imagine que os arquivos na sua área de trabalho não tivessem nomes. Em vez disso, você se referiria a eles pela ordem — o primeiro arquivo, o segundo arquivo, e assim por diante. Você poderia se acostumar, mas ao excluir um arquivo, ficaria confuso. O segundo arquivo se tornaria o primeiro, o terceiro arquivo seria o segundo, e assim por diante.
Nomes de arquivos em uma pasta e chaves JSX em um array servem a um propósito similar. Eles nos permitem identificar um item de forma única entre seus irmãos. Uma chave bem escolhida fornece mais informação do que a posição dentro do array. Mesmo que aposiçãomude devido a uma reordenação, akeypermite que o React identifique o item ao longo de seu ciclo de vida.
Armadilha
Você pode ficar tentado a usar o índice do item no array como sua chave. Na verdade, é isso que o React usará se você não especificar umakey. Mas a ordem em que você renderiza os itens mudará ao longo do tempo se um item for inserido, excluído ou se o array for reordenado. Índice como chave frequentemente leva a bugs sutis e confusos.
Da mesma forma, não gere chaves dinamicamente, por exemplo, comkey={Math.random()}. Isso fará com que as chaves nunca coincidam entre as renderizações, levando a todos os seus componentes e DOM sendo recriados toda vez. Não apenas isso é lento, mas também perderá qualquer entrada do usuário dentro dos itens da lista. Em vez disso, use um ID estável baseado nos dados.
Observe que seus componentes não receberãokeycomo uma prop. Ela é usada apenas como uma dica pelo próprio React. Se seu componente precisa de um ID, você deve passá-lo como uma prop separada:<Profile key={id} userId={id} />.
Recapitulação
Nesta página você aprendeu:
- Como mover dados para fora dos componentes e para estruturas de dados como arrays e objetos.
- Como gerar conjuntos de componentes semelhantes com o
map()do JavaScript. - Como criar arrays de itens filtrados com o
filter()do JavaScript. - Por que e como definir uma
keyem cada componente de uma coleção para que o React possa rastrear cada um deles mesmo que sua posição ou dados mudem.
Try out some challenges
Challenge 1 of 4:Splitting a list in two #
This example shows a list of all people.
Change it to show two separate lists one after another: Chemists and Everyone Else. Like previously, you can determine whether a person is a chemist by checking if person.profession === 'chemist'.