Récapitulatif : Conditions et Listes
Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 38 sur 42.
Défi
MoyenRécapitulatif du chapitre : construisez un tableau de tâches à partir des données, en utilisant tout ce qui a été vu dans ce chapitre.
- Le composant définit un tableau
tasks. À l'intérieur de l'élément<ul id="done-list">, affichez un<li>pour chaque tâche qui est done : appliquez d'abordfilter, puismap. - Chaque
<li>affiche letextde la tâche et utilise sonidcommekey. - Au-dessus de la liste, utilisez
&&pour afficher un<span>avecid="badge"contenant2 done(construisez ce nombre à partir de la propriétélengthdu tableau filtré !), mais uniquement lorsqu'au moins une tâche est marquée comme terminée.
Essayez vous-même
<!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>Toutes les leçons de Les fondamentaux
1Découvrez React
Qu'est-ce que React ?Votre premier composantRègle du parent uniqueJSX n'est pas de l'HTMLRécapitulatif : Découvrez React4Props
Que sont les props ?Passer des propsDeux propsMême composant, nouvelles donnéesLa prop ChildrenRécapitulatif : Props7Conditions et Listes
Rendu ternaireAfficher avec &&Afficher une listeL'importance des clésFiltrer, puis mapperRécapitulatif : Conditions et Listes