Renderizando Listas

Renderizando dados de arrays

Digamos que você tenha uma lista de informações.

<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 dados diferentes ao construir interfaces: de listas de comentários a galerias de fotos de perfil. Nestas 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>;

Esse é o resultado:

Perceba que a sandbox acima exibe um erro no console:

Mais tarde nessa página, você aprenderá como corrigir este erro. Mas antes, vamos estruturar os seus dados um pouco mais.

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',
}];

Vamos supor que você queira exibir somente as pessoas cuja profissão seja 'chemist'. Neste caso, voce pode usar o método filter() do JavaScript para retornar apenas essas pessoas. Este método recebe um array de itens, os quais são submetidos a 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 isto ficaria assim (person) => person.profession === 'chemist'. Veja como juntar tudo isso:

1. Crie um novo array contendo apenas pessoas cuja profissão é “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 que o identifique 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 (por exemplo, ao ser ordenado), serem inseridos, ou serem removidos. Uma key bem escolhida ajuda o React a identificar o que exatamente aconteceu, e fazer as atualizações corretas à árvore da DOM.

Em vez 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

As chaves podem vir de diferentes fontes de dados:

• 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 (por exemplo, anotações em um aplicativo de notas), use um contador incremental, crypto.randomUUID() ou um biblioteca como a uuid ao criar itens.

Regras das keys

• Keys devem ser únicas entre suas irmãs. Entretanto, é tranquilo usar as mesmas chaves para nós JSX em arrays diferentes.
• Keys não devem mudar caso contrário, isso vai contra o 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ê teria que se referir a eles pela sua ordem — o primeiro arquivo, o segundo arquivo, e assim por diante. Isto poderia funcionar em um primeiro momento, porém uma vez que você exclua um arquivo, as coisas iriam ficar confusas. 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 permitem com que nós identifiquemos unicamente um item entre seus irmãos. Uma key bem escolhida fornece mais informação que uma 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.