Renderizando Listas

Renderizando dados de arrays

Digamos que você tenha uma lista de conteúdo.

<ul>
  <li>Creola Katherine Johnson: mathematician</li>
  <li>Mario José Molina-Pasquel Henríquez: chemist</li>
  <li>Mohammad Abdus Salam: physicist</li>
  <li>Percy Lavon Julian: chemist</li>
  <li>Subrahmanyan Chandrasekhar: astrophysicist</li>
</ul>

As únicas diferenças entre os itens da lista são seus conteúdos, seus dados. Você comumente precisará exibir diversas instâncias do mesmo componente usando diferentes dados ao construir interfaces: de listas de comentários a galeiras de fotos de perfil. Nessas situações, você pode armazenar esses dados em objetos ou arrays JavaScript e usar métodos como map() 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:

1. Mova os dados para um array:

const people = [
  'Creola Katherine Johnson: mathematician',
  'Mario José Molina-Pasquel Henríquez: chemist',
  'Mohammad Abdus Salam: physicist',
  'Percy Lavon Julian: chemist',
  'Subrahmanyan Chandrasekhar: astrophysicist'
];

2. Mapeie os membros de people a um novo array de nós JSX, listItems:

const listItems = people.map(person => <li>{person}</li>);

3. Retorne listItems do seu componente dentro de uma <ul>:

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

Aqui está o resultado:

Perceba que a sandbox acima exibe um erro no console:

Você aprenderá como consertar este erro mais tarde nessa página. Antes de chegarmos nisto, vamos adicionar alguma estrutura aos seus dados.

Filtrando arrays de itens

Esses dados podem ser estruturados ainda mais.

const people = [{
  id: 0,
  name: 'Creola Katherine Johnson',
  profession: 'mathematician',
}, {
  id: 1,
  name: 'Mario José Molina-Pasquel Henríquez',
  profession: 'chemist',
}, {
  id: 2,
  name: 'Mohammad Abdus Salam',
  profession: 'physicist',
}, {
  name: 'Percy Lavon Julian',
  profession: 'chemist',  
}, {
  name: 'Subrahmanyan Chandrasekhar',
  profession: 'astrophysicist',
}];

Digamos que você queira uma maneira de mostrar apenas as pessoas cuja profissão é 'chemist'. Você pode usar o método filter() do JavaScript para retornar apenas essas pessoas. Esse método recebe um array de itens, passa-os por um “teste” (uma função que retorna true ou false), e retorna um novo array contendo apenas aqueles itens os quais passaram no teste (retornaram true).

Você quer apenas os itens onde profession seja 'chemist'. A função “teste” para isso se parece com (person) => person.profession === 'chemist'. Aqui está como juntar tudo isso:

1. Crie um novo array de apenas pessoas “chemist”, chemists, chamando filter() em people e filtrando por person.profession === 'chemist':

const chemists = people.filter(person =>
  person.profession === 'chemist'
);

2. Agora mapeie sobre chemists:

const listItems = chemists.map(person =>
  <li>
     <img
       src={getImageUrl(person)}
       alt={person.name}
     />
     <p>
       <b>{person.name}:</b>
       {' ' + person.profession + ' '}
       known for {person.accomplishment}
     </p>
  </li>
);

3. Por fim, retorne listItems em seu componente:

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

const listItems = chemists.map(person =>
  <li>...</li> // Retorno implícito!
);

const listItems = chemists.map(person => { // Chave
  return <li>...</li>;
});

Mantendo itens em ordem com key

Perceba que todas as sandboxes acima exibem um erro no console:

Você precisa dar a cada item do array uma key — uma string ou um número o qual o identifica unicamente dentre os demais itens naquele array:

<li key={person.id}>...</li>

Keys dizem 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 (ex. por ser ordenado), serem inseridos, ou serem removidos. Uma key bem escolhida ajuda o React a inferir o que exatamente aconteceu, e fazer as atualizações corretas à árvore da DOM.

Ao invés de gerar keys em tempo real, você deve incluí-las em seus dados:

import { Fragment } from 'react';

// ...

const listItems = people.map(person =>
  <Fragment key={person.id}>
    <h1>{person.name}</h1>
    <p>{person.bio}</p>
  </Fragment>
);

Onde conseguir sua key

Diferentes fontes de dados fornecem diferentes fontes de keys:

• Dados de uma base de dados: Se seus dados estão vindo de uma base de dados, você pode usar as keys/IDs desta, os quais são únicos por natureza.
• Dados gerados localmente: Se seus dados são gerados e persistidos localmente (ex. anotações em um aplicativo de notas), use um contador incremental, crypto.randomUUID() ou um pacote como uuid ao criar itens.

Regras das keys

• Keys devem ser únicas dentre suas irmãs. Entretanto, é tranquilo usar a mesma keys para nós JS em arrays diferentes.
• Keys não devem mudar ou isso derrota seu propósito! Não as gere durante a renderização.

Por que o React precisa de keys?

Imagine que os arquivos em sua área de trabalho não tivessem nomes. Em vez disso, você se referiria a eles por meio de sua ordem — o primeiro arquivo, o segundo arquivo, e assim por diante. Você poderia se acostumar com isto, porém uma vez que você exclua um arquivo, isto iria ficar confuso. O segundo arquivo se tornaria o primeiro, o terceiro arquivo se tornaria o segundo e assim por diante.

Nomes de arquivo em uma pasta e keys JSX em um array servem um propósito similar. Eles deixam com que nós identifiquemos unicamente um item entre seus irmãos. Um chave bem escolhida fornece mais informação que a posição dentro do array. Mesmo que a posição mude por conta de uma reordenação, a key permite que o React identifique o item durante seu ciclo de vida.