Zusammenfassung: Bedingungen & Listen
Teil des Abschnitts Grundlagen der React-Journey von Coddy — Lektion 38 von 42.
Aufgabe
MittelKapitelzusammenfassung: Baue ein Task-Board aus den Daten und verwende alles aus diesem Kapitel.
- Die Komponente definiert ein
tasks-Array. Rendere innerhalb des<ul id="done-list">ein<li>pro Task, die erledigt ist: zuerstfilter, dannmap. - Jedes
<li>zeigt dentextder Task und verwendet derenidalskey. - Verwende über der Liste
&&, um ein<span>mitid="badge"zu rendern, das2 donelautet (baue die Zahl aus derlengthdes gefilterten Arrays!), aber nur, wenn mindestens eine Task 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