Realizar uma Coleta de Dados
Ao trabalhar com aplicativos da web modernos, é comum renderizar coleções de dados recebidos do backend. Para realizar isso, utilizamos o método map(). Dentro do método map(), empregamos uma função de retorno de chamada e retornamos JSX para renderizar a saída desejada.
Vamos usar um exemplo para ilustrar como isso funciona. Teremos um componente App que passará a propriedade toys, um vetor de objetos. O componente ToyCard utilizará o método map() para renderizar cada brinquedo no vetor.
Nas linhas 13-15, observamos a utilização do método map(). Ele nos permite iterar por cada item do array, extrair seu valor e gerar uma marcação específica com base nos dados de cada item.
Código completo do aplicativo:
No entanto, se prestarmos atenção no console, podemos descobrir que recebemos o aviso: Cada filho em uma lista deve ter uma propriedade "key" única..
Chave
A chave é uma propriedade de string crucial que deve ser atribuída ao criar elementos dentro de uma coleção.
O React utiliza chaves para assegurar uma identidade estável para os elementos dentro de uma coleção. Essas chaves permitem que o React identifique quais elementos precisam ser re-renderizados e recriados quando ocorrem mudanças, em vez de recriar toda a coleção. O uso de chaves previne a recriação desnecessária de elementos, levando a uma melhoria no desempenho.
Nota
A chave deve ser única entre os elementos vizinhos. Ela deve permanecer constante e não mudar ao longo do tempo.
É comumente recomendado utilizar identificadores, como valores de id de dados de backend, como props de chave. Essa prática permite que o React identifique e gerencie elementos individuais dentro de uma coleção de forma eficaz.
Vamos corrigir nosso aplicativo anterior usando as props de chave para os itens:
Linha 14: a prop key é definida no elemento que será renderizado várias vezes dentro de um array de dados.
Código completo do aplicativo:
Tudo estava claro?
Conteúdo do Curso
Mastering React
1. Introdução aos Fundamentos do React
2. Estilização em Aplicações React
3. Hooks do React e Contexto
Mastering React
Realizar uma Coleta de Dados
Ao trabalhar com aplicativos da web modernos, é comum renderizar coleções de dados recebidos do backend. Para realizar isso, utilizamos o método map(). Dentro do método map(), empregamos uma função de retorno de chamada e retornamos JSX para renderizar a saída desejada.
Vamos usar um exemplo para ilustrar como isso funciona. Teremos um componente App que passará a propriedade toys, um vetor de objetos. O componente ToyCard utilizará o método map() para renderizar cada brinquedo no vetor.
Nas linhas 13-15, observamos a utilização do método map(). Ele nos permite iterar por cada item do array, extrair seu valor e gerar uma marcação específica com base nos dados de cada item.
Código completo do aplicativo:
No entanto, se prestarmos atenção no console, podemos descobrir que recebemos o aviso: Cada filho em uma lista deve ter uma propriedade "key" única..
Chave
A chave é uma propriedade de string crucial que deve ser atribuída ao criar elementos dentro de uma coleção.
O React utiliza chaves para assegurar uma identidade estável para os elementos dentro de uma coleção. Essas chaves permitem que o React identifique quais elementos precisam ser re-renderizados e recriados quando ocorrem mudanças, em vez de recriar toda a coleção. O uso de chaves previne a recriação desnecessária de elementos, levando a uma melhoria no desempenho.
Nota
A chave deve ser única entre os elementos vizinhos. Ela deve permanecer constante e não mudar ao longo do tempo.
É comumente recomendado utilizar identificadores, como valores de id de dados de backend, como props de chave. Essa prática permite que o React identifique e gerencie elementos individuais dentro de uma coleção de forma eficaz.
Vamos corrigir nosso aplicativo anterior usando as props de chave para os itens:
Linha 14: a prop key é definida no elemento que será renderizado várias vezes dentro de um array de dados.
Código completo do aplicativo:
Tudo estava claro?
