React - Listas e chaves

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.