As Listas e Chaves no React, o que são e como funcionam?

O React é uma biblioteca popular de JavaScript para construir interfaces de usuário reativas e escaláveis. Uma das características mais poderosas do React é a sua capacidade de renderizar listas e componentes de forma eficiente. Isso é feito usando listas e chaves.

LISTAS -

Uma lista é uma coleção de elementos que podem ser renderizados em uma página. Por exemplo, se quisermos criar uma lista de nomes, podemos escrever o seguinte:

const nomes = ['João', 'Maria', 'Pedro', 'Catia'];
function ListaDeNomes() {
  return (
    <ul>
      {nomes.map((nome) => (<li>{nome}</li>))}
    </ul>
  );
}

Nesse caso, criamos um array com 4 elementos guardados, que se chama nome. Após a criação da função ListaDeNomes, retornamos o método mappara percorrer o array acima e listamos co li( ul também está aqui, relembrando bem o HTML utilizado na web) trazendo a lista com 4 itens.

Seu funcionamento se baseia nesse formato, veja mais um exeplo de Listas feitas em React:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li>{number}</li>
);

CHAVES -

As Chaves são trabalhadas com listas. Elas são usadas para dar uma identidade única a cada elemento em uma lista. Por exemplo, se quisermos criar uma lista de tarefas com uma propriedade id para cada tarefa, podemos fazer do seguinte modo:

const tarefas = [
  { id: 1, descricao: 'Estudar React Native' },
  { id: 2, descricao: 'Comprar um Macbook' },
  { id: 3, descricao: 'Ir à academia' },
];

function ListaDeTarefas() {
  return (
    <ul>
 {tarefas.map((tarefa) => 
(<li key={tarefa.id}>{tarefa.descricao}</li>))}
    </ul>
  );
}

Neste exemplo, temos um array tarefas com três elementos, cada um com um id e uma descricao. Usamos a propriedade key para atribuir uma chave única a cada elemento na lista. As chaves ajudam o React a identificar qual elemento foi modificado, adicionado ou removido quando uma lista é atualizada.

Ao criar uma lista de elementos, podemos usar o método map() para criar elementos para cada item na lista. As chaves ajudam o React a identificar cada elemento em uma lista, o que é útil para atualizar a lista de forma eficiente.

Com isso, nós vimos como usar listas e chaves no React é um recurso poderoso para construir interfaces de usuário escaláveis e eficientes. Com o uso recorrente, você se tornará mais familiarizado com a sintaxe e poderá criar listas complexas com facilidade.