No React, utilizamos listas e Chaves para renderizar vários componentes de uma vez, onde as listas nos fornecem os dados necessários para criar os componentes e as chaves identificarão de forma unica cada um deles.
Quando falamos em listas estamos nos referindo a qualquer "array" que será percorrido por meio de uma estrutura de repetição, um "map" por exemplo.
Já quando falamos em uma "chave" nos referimos a uma "string" que irá identificar de forma unica o componente visual sendo criado. Essa "chave" ajuda o React a identificar esses elementos, permitindo controlar e identificar alterações.
As chaves são identificadas pela propriedade "key", sendo essa propriedade reservada exclusivamente ao React, se for necessário recuperar a mesma deve-se criar uma nova propriedade no elemento. Outro ponto importante sobre chaves é que devemos sempre dar preferencia para valores que representem de forma unica os itens de nosso "array", apesar de ser possível gerar chaves a partir do índice do "array" essa não é uma prática recomendável devido a questões de desempenho.
Exemplo
Lista
const convidados = [
{codigo: 1007, nome:"Edmundo"},
{codigo: 1009, nome:"Evair"},
{codigo: 1012, nome:"Marcos"}
];
Uso da chave
{convidados.map((convidado) =>
Convidado
key={convidado.codigo}
convidado={convidado}>
Convidado>
)}
Componente
import React, { Component } from 'react'
class Convidado extends Component {
constructor(props) {
super(props);
this.state = {
convidado: props.convidado
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
alert('Código:' + this.state.convidado.codigo + '\nNome:' +
this.state.convidado.nome);
}
render() {
return(
li
id={this.state.convidado.codigo}
onClick={this.handleClick}
>
{this.state.convidado.nome}
li>
);
}
}
export default Convidado
No exemplo anterior temos uma aplicação que nos mostra uma lista de convidados, onde um "array" é percorrido e para cada item é criado um componente "Convidado", onde sua "key" é o código do convidado, as informações do convidado são passadas para o componente onde é mostrado o código e o nome quando clicamos em um item.
O projeto do exemplo pode ser encontrado aqui.
