Filter（抽出）してから Map（変換）
CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 37/42。
配列メソッドはチェーンでき、map の前に filter を使用することで必要なアイテムだけを render できます：
const numbers = [1, 2, 3, 4, 5, 6];
{numbers
.filter((n) => n % 2 === 0)
.map((n) => <li key={n}>{n}</li>)}
// 表示: 2, 4, 6filter は条件が true の項目を残し、map はその生き残った項目を要素へと変換します。検索結果、未読メッセージ、完了した Todo。ウェブ上のすべての「…のみ表示」機能はこのチェーンです。
チャレンジ
中級ショップの手頃な価格のアイテムのみを表示します。
<ul id="cheap-list">内に、配列内の 10 未満 の価格ごとに 1 つの<li>をレンダリングします。最初に filter し、次に map します。- 各
<li>は価格を表示し、それを key として使用します。
自分で試してみよう
<!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>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。