Zusammenfassung: Bedingungen & Listen
Teil des Abschnitts Grundlagen der React-Journey von Coddy. Lektion 38 von 42.
Aufgabe
MittelKapitelrückblick: Erstelle anhand der Daten ein Aufgabenboard und verwende dabei alles aus diesem Kapitel.
- Die Komponente definiert ein
tasks-Array. Rendere innerhalb von<ul id="done-list">ein<li>pro Aufgabe, die erledigt ist: zuerstfilter, dannmap. - Jedes
<li>zeigt dentextder Aufgabe an und verwendet ihreidalskey. - Verwende oberhalb der Liste
&&, um ein<span>mitid="badge"zu rendern, das2 doneanzeigt (ermittle die Zahl aus derlengthdes gefilterten Arrays!), aber nur, wenn mindestens eine Aufgabe erledigt ist.
Probier es selbst
<!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>Alle Lektionen in Grundlagen
1Lerne React kennen
Was ist React?Deine erste KomponenteDie Regel des einen Eltern-ElementsJSX ist nicht HTMLZusammenfassung: Lerne React kennen4Props
Was sind Props?Props übergebenZwei PropsGleiche Komponente, neue DatenDie Children-PropZusammenfassung: Props7Bedingungen & Listen
Ternäres RendernAnzeigen mit &&Eine Liste rendernKeys sind wichtigErst filtern, dann mappenZusammenfassung: Bedingungen & Listen