Recapitulando: Condições e Listas
Parte da seção Fundamentos do Journey de React da Coddy — lição 38 de 42.
Desafio
MédioRecapitulação do capítulo: construa um painel de tarefas a partir dos dados, usando tudo deste capítulo.
- O componente define um array
tasks. Dentro da<ul id="done-list">, renderize um<li>para cada tarefa que estiver pronta (done):filterprimeiro, depoismap. - Cada
<li>mostra otextda tarefa e usa seuidcomo akey. - Acima da lista, use
&¶ renderizar um<span>comid="badge"exibindo2 done(construa o número a partir dalengthdo array filtrado!), mas apenas quando pelo menos uma tarefa estiver concluída.
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>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