まとめ：条件分岐とリスト
CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 38/42。
チャレンジ
中級章のまとめ: この章で学んだすべての内容を使用して、データからタスクボードを構築します。
- コンポーネントは
tasks配列を定義します。<ul id="done-list">内に、done であるタスクごとに1つの<li>をrenderします: 最初にfilterし、次にmapします。 - 各
<li>にはタスクのtextを表示し、そのidをkeyとして使用します。 - リストの上に、
&&を使用してid="badge"を持つ<span>をレンダリングし、2 doneと表示します（数値はフィルタリングされた配列のlengthから作成します！）。ただし、少なくとも1つのタスクが完了している場合（done の場合）に限ります。
自分で試してみよう
<!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>