Listas e chaves
React • Módulo 1: Começando • Codding — material para estudo offline
Aluno: ______________________________ Data: ____ / ____ / ______
Nesta aula, você vai compreender Listas e chaves com explicação progressiva, exemplo resolvido, checagens e prática. Nada de apenas copiar: cada etapa prepara a próxima.
Objetivos da aula
- Explicar Listas e chaves com suas próprias palavras
- Reconhecer as partes importantes em um exemplo real
- Identificar e corrigir os erros mais frequentes
- Aplicar o conteúdo em uma atividade prática
Pré-requisito: Leia a aula anterior do módulo se algum termo parecer novo. Você pode testar o exemplo antes de continuar. • Duração: 50–75 min
Explicação passo a passo
1. O que é Listas e chaves
Em React a interface é função do estado: você não manda a tela mudar, você muda o estado e o React recalcula o que aparece.
Checkpoint: Por que itens.push(novo) + setItens(itens) não atualiza a tela? — Resposta: Porque a referência do array continua a mesma e o React não detecta mudança
2. Como pensar antes de fazer
Props são dados que descem do pai e são somente leitura. Estado é interno ao componente e muda com o setter. Se dois componentes precisam do mesmo dado, suba o estado para o pai comum.
Dica: Não decore a forma. Tente explicar com suas palavras qual problema “Listas e chaves” resolve.
3. Exemplo completo, do início ao resultado
Nunca modifique estado diretamente. setLista(lista) com o mesmo array não re-renderiza: crie um novo valor ([...lista, novo]) para o React perceber a mudança por identidade.
// Contador com estado + lista com key estável
function Tarefa({ texto, feito, onToggle }) { // props
return <li onClick={onToggle}>{feito ? "✔ " : "○ "}{texto}</li>;
}
function Lista() {
const [itens, setItens] = React.useState([
{ id: 1, texto: "Estudar React", feito: false },
]);
function toggle(id) {
setItens((atual) =>
atual.map((i) => (i.id === id ? { ...i, feito: !i.feito } : i)) // novo array
);
}
return <ul>{itens.map((i) => (
<Tarefa key={i.id} texto={i.texto} feito={i.feito} onToggle={() => toggle(i.id)} />
))}</ul>;
}| Trecho | O que faz |
|---|
// Contador com estado + lista com key estável | Comentário de orientação: documenta a intenção sem executar uma ação. |
function Tarefa({ texto, feito, onToggle }) { // props | Cria uma estrutura reutilizável para organizar comportamento. |
return <li onClick={onToggle}>{feito ? "✔ " : "○ "}{texto}</li>; | Produz ou devolve o resultado que permite conferir a execução. |
} | Contribui para a transformação principal mostrada neste exemplo. |
function Lista() { | Cria uma estrutura reutilizável para organizar comportamento. |
const [itens, setItens] = React.useState([ | Cria ou atualiza um valor que será usado pelo restante do exemplo. |
{ id: 1, texto: "Estudar React", feito: false }, | Contribui para a transformação principal mostrada neste exemplo. |
]); | Contribui para a transformação principal mostrada neste exemplo. |
Dica: map cria um array novo com um objeto novo só no item alterado. Nada é mutado, e a key vem do id.
Checkpoint: Props são: — Resposta: Somente leitura, vindas do pai
4. Do detalhe para o todo
Em listas, key deve ser um id estável. Usar o índice quebra a reconciliação quando itens são inseridos, removidos ou reordenados — campos digitados 'pulam' de linha.
5. Erros comuns e como corrigi-los
1. Mutar estado (push, atribuição direta) e a tela não atualizar.
2. Usar o índice como key em listas dinâmicas.
3. Colocar lógica pesada direto no corpo do componente a cada render.
Dica: Quando algo der errado, compare uma diferença por vez com o exemplo. Evite mudar várias partes ao mesmo tempo.
Prática guiada
1. 1. Faça funcionar
Laboratório de Listas e chaves: execute o exemplo, identifique entrada, processamento e saída e altere pelo menos um valor para observar como o resultado muda.
// Contador com estado + lista com key estável
function Tarefa({ texto, feito, onToggle }) { // props
return <li onClick={onToggle}>{feito ? "✔ " : "○ "}{texto}</li>;
}
function Lista() {
const [itens, setItens] = React.useState([
{ id: 1, texto: "Estudar React", feito: false },
]);
function toggle(id) {
setItens((atual) =>
atual.map((i) => (i.id === id ? { ...i, feito: !i.feito } : i)) // novo array
);
}
return <ul>{itens.map((i) => (
<Tarefa key={i.id} texto={i.texto} feito={i.feito} onToggle={() => toggle(i.id)} />
))}</ul>;
}Dica: Volte ao exemplo resolvido e compare a estrutura. Mutar estado (push, atribuição direta) e a tela não atualizar.
2. 2. Preveja antes de testar
Sem executar, explique qual resultado o exemplo de Listas e chaves deve produzir e qual parte é responsável por ele.
Minha previsão:
A parte responsável pelo resultado:
Como vou conferir:
Dica: Use o modelo mental da aula: entrada, transformação e evidência observável.
3. 3. Encontre e corrija o erro
Use o exemplo de Listas e chaves, identifique um risco citado na aula e registre ou implemente a correção.
// Contador com estado + lista com key estável
function Tarefa({ texto, feito, onToggle }) { // props
return <li onClick={onToggle}>{feito ? "✔ " : "○ "}{texto}</li>;
}
function Lista() {
const [itens, setItens] = React.useState([
{ id: 1, texto: "Estudar React", feito: false },
]);
function toggle(id) {
setItens((atual) =>
atual.map((i) => (i.id === id ? { ...i, feito: !i.feito } : i)) // novo array
);
}
return <ul>{itens.map((i) => (
<Tarefa key={i.id} texto={i.texto} feito={i.feito} onToggle={() => toggle(i.id)} />
))}</ul>;
}Dica: Mutar estado (push, atribuição direta) e a tela não atualizar.
4. 4. Aplique em um caso novo
Crie uma variação própria usando Listas e chaves. Mude os dados ou o cenário e demonstre que o resultado continua correto.
// Contador com estado + lista com key estável
function Tarefa({ texto, feito, onToggle }) { // props
return <li onClick={onToggle}>{feito ? "✔ " : "○ "}{texto}</li>;
}
function Lista() {
const [itens, setItens] = React.useState([
{ id: 1, texto: "Estudar React", feito: false },
]);
function toggle(id) {
setItens((atual) =>
atual.map((i) => (i.id === id ? { ...i, feito: !i.feito } : i)) // novo array
);
}
return <ul>{itens.map((i) => (
<Tarefa key={i.id} texto={i.texto} feito={i.feito} onToggle={() => toggle(i.id)} />
))}</ul>;
}Dica: Mantenha a estrutura que já funcionou e altere uma decisão por vez.
Revisão
- Em React a interface é função do estado: você não manda a tela mudar, você muda o estado e o React recalcula o que aparece.
- map cria um array novo com um objeto novo só no item alterado. Nada é mutado, e a key vem do id.
- Evite: Mutar estado (push, atribuição direta) e a tela não atualizar.
- Evite: Usar o índice como key em listas dinâmicas.
Exemplo comentado
// Contador com estado + lista com key estável
function Tarefa({ texto, feito, onToggle }) { // props
return <li onClick={onToggle}>{feito ? "✔ " : "○ "}{texto}</li>;
}
function Lista() {
const [itens, setItens] = React.useState([
{ id: 1, texto: "Estudar React", feito: false },
]);
function toggle(id) {
setItens((atual) =>
atual.map((i) => (i.id === id ? { ...i, feito: !i.feito } : i)) // novo array
);
}
return <ul>{itens.map((i) => (
<Tarefa key={i.id} texto={i.texto} feito={i.feito} onToggle={() => toggle(i.id)} />
))}</ul>;
}map cria um array novo com um objeto novo só no item alterado. Nada é mutado, e a key vem do id.
Erros comuns
- Mutar estado (push, atribuição direta) e a tela não atualizar.
- Usar o índice como key em listas dinâmicas.
- Colocar lógica pesada direto no corpo do componente a cada render.
Quiz e gabarito completo
1. Por que itens.push(novo) + setItens(itens) não atualiza a tela?
- a) Porque push é lento
- b) Porque a referência do array continua a mesma e o React não detecta mudança
- c) Porque push não existe
- d) Porque falta await
Gabarito: b) Porque a referência do array continua a mesma e o React não detecta mudança — React compara por identidade; é preciso um novo array.
2. Props são:
- a) Mutáveis pelo filho
- b) Somente leitura, vindas do pai
- c) Estado global
- d) Variáveis do navegador
Gabarito: b) Somente leitura, vindas do pai — Quem muda o dado é o dono do estado, no pai.
Codding • React • Listas e chaves • Prova final e certificado em codding.lovable.app/cursos/react/prova