Listas e Keys

Já vimos como criar componentes react com funções e classes e conhecemos a função das props e do state. Agora, vamos ver como lidar com listas no react.

Exemplo de lista

É muito comum precisarmos listar algo, principalmente listar algo dinâmico. Então, para assimilação do conhecimento, acompanhe a aula implementando o código abaixo:

import React from 'react';
import ReactDOM from 'react-dom';

const numbers = [1, 2, 3, 4, 5, 6, 7]

const listItems = numbers.map((number) => {
  return <li>{number}</li>
})

const element = listItems

ReactDOM.render(
  element,
  document.getElementById('root')
);

Identificador Único

O código acima funcionará, porém, com warnings e não é uma boa prática ignorar os avisos do compilador.

O problema é que, ao usar lista, cada elemento precisa ter algo que o identifique de forma única, uma key passada como propriedade da tag. Existem vários meios de fazer isso, mas o que usaremos aqui é passar o index de cada elemento como seu identificador.

Então, no mapeamento dos itens adicione essa chave. Veja abaixo:

const listItems = numbers.map((number, index) => {
  return <li key={index}>{number}</li>
})