Filtrar e Mapear
Parte da seção Fundamentos do Journey de React da Coddy — lição 37 de 42.
Encadeamento de métodos de array, e o filter antes do map renders apenas os itens que você quer:
const numbers = [1, 2, 3, 4, 5, 6];
{numbers
.filter((n) => n % 2 === 0)
.map((n) => <li key={n}>{n}</li>)}
// renderiza: 2, 4, 6filter mantém os itens onde a condição é verdadeira; map transforma os sobreviventes em elementos. Resultados de busca, mensagens não lidas, tarefas concluídas. Cada funcionalidade "mostrar apenas..." na web é essa cadeia.
Desafio
MédioMostre apenas os itens acessíveis da loja.
- Dentro de
<ul id="cheap-list">, renderize um<li>por preço no array que seja menor que 10: faça o filter primeiro, depois o map. - Cada
<li>mostra o preço e o usa como a key.
Experimente você mesmo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Fundamentos
1Conheça o React
O que é o React?Seu primeiro componenteRegra do elemento pai únicoJSX não é HTMLRecapitulação: Conheça o React4Props
O Que São Props?Passando PropsDuas PropsMesmo Componente, Novos DadosA Prop ChildrenRecapitulando: Props7Condições e Listas
Renderização TernáriaExibir com &&Renderizar uma ListaA Importância das KeysFiltrar e MapearRecapitulando: Condições e Listas