Frontend Academy · Aula

Listas, chaves e renderização condicional

Renderize arrays de elementos com .map(), forneça props key estáveis e renderize elementos condicionalmente com && e o operador ternário.

Listas, chaves e renderização condicional é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Renderizando listas com .map()

Renderize uma lista dinâmica chamando .map() em uma matriz e retornando JSX para cada item. React renderiza uma matriz de elementos assim como renderiza um único elemento.

const fruits = ['apple', 'banana', 'cherry'];

return (
  <ul>
    {fruits.map(fruit => (
      <li key={fruit}>{fruit}</li>
    ))}
  </ul>
);

A prop key — por que é importante

key é uma prop especial do React que o ajuda a identificar quais itens de uma lista foram alterados, adicionados ou removidos. Sem chaves (ou com chaves instáveis, como índices), React pode produzir atualizações incorretas.

Chaves boas e ruins

Chaves boas: identificadores exclusivos e estáveis dos seus dados (por exemplo, item.id). Chaves ruins: índices da matriz (os itens podem ser reordenados) ou valores aleatórios (mudam a cada renderização).

// Bad: index keys — breaks when list reorders
{items.map((item, i) => <Item key={i} {...item} />)}

// Good: stable unique IDs
{items.map(item => <Item key={item.id} {...item} />)}

Renderizando objetos

Mapeie uma matriz de objetos para componentes, desestruturando o objeto em props.

interface Todo { id: number; text: string; done: boolean; }

const todos: Todo[] = [...];

return (
  <ul>
    {todos.map(({ id, text, done }) => (
      <TodoItem key={id} text={text} done={done} />
    ))}
  </ul>
);

Renderização condicional com &&

Utilize o operador de curto-circuito && para incluir JSX condicionalmente. Se o lado esquerdo for falso, nada será renderizado. Tenha cuidado com números falsos — 0 é renderizado como '0'.

function Status({ count }: { count: number }) {
  return (
    <div>
      {count > 0 && <Badge count={count} />}
      {/* Safer: */}
      {count > 0 ? <Badge count={count} /> : null}
    </div>
  );
}

Renderização condicional com ternário

Utilize o operador ternário para renderizar um de dois elementos com base em uma condição.

function AuthButton({ isLoggedIn }: { isLoggedIn: boolean }) {
  return isLoggedIn
    ? <button onClick={logout}>Sign Out</button>
    : <button onClick={login}>Sign In</button>;
}

Renderização condicional com a instrução if

Para condições complexas, utilize uma instrução if antes do retorno. Retorne antecipadamente nos estados de carregamento ou erro.

function UserProfile({ user }: { user: User | null }) {
  if (!user) return <p>Loading...</p>;
  if (user.banned) return <p>Account suspended.</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

Filtrando antes de mapear

Filtre a matriz antes de mapeá-la para renderizar apenas os itens correspondentes. Isso é claro e legível.

const activeUsers = users.filter(u => u.active);

return (
  <ul>
    {activeUsers.map(user => (
      <UserItem key={user.id} {...user} />
    ))}
  </ul>
);

Estado vazio

Sempre trate o caso de uma matriz vazia. Renderizar uma lista vazia silenciosamente é confuso — mostre uma mensagem útil de estado vazio.

return (
  <div>
    {todos.length === 0
      ? <p className="empty-state">No tasks yet. Add one above!</p>
      : <ul>{todos.map(t => <TodoItem key={t.id} {...t} />)}</ul>
    }
  </div>
);

Renderização de portais para listas

Listas longas que precisam aparecer em um nó diferente do DOM, como um menu suspenso, podem usar ReactDOM.createPortal. Porém, a maior parte da renderização de listas é simples dentro da árvore.

Listas virtualizadas para melhor desempenho

Para listas muito longas, com mais de 1.000 itens, use uma biblioteca de virtualização como react-window ou @tanstack/react-virtual. Elas renderizam apenas as linhas visíveis, evitando problemas de desempenho no DOM.

Verificação rápida

Quando é aceitável usar o índice do vetor como key em listas do React?

Recapitulação: listas e renderização condicional

Renderize listas com .map(). Sempre adicione propriedades de chave estáveis e exclusivas. Use && para elementos opcionais, mas tenha cuidado com 0. Use o operador ternário para alternativas. Use retornos antecipados para estados de carregamento ou erro. Filtre antes de mapear em listas condicionais. Mostre uma mensagem de estado vazio para vetores vazios. Virtualize listas muito longas.

Perguntas Frequentes

A aula “Listas, chaves e renderização condicional” é grátis?

Sim — o texto completo de “Listas, chaves e renderização condicional” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Listas, chaves e renderização condicional”?

Renderize arrays de elementos com .map(), forneça props key estáveis e renderize elementos condicionalmente com && e o operador ternário. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Listas, chaves e renderização condicional”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

JSX: sintaxe e transpilação
Componentes funcionais e props
Hook useState: estado e novas renderizações
Listas, chaves e renderização condicional

← Voltar para Frontend Academy