mapでリスト描画
手で3枚並べたところを回収します
第3章の「部品の再利用」で、作品カードを手で3枚コピーして並べました。作品が1件増えたら JSX をコピーして貼り、公開をやめたら消す。データは配列で持っているのに、画面のほうだけ手作業で追いかけている状態でした。この回でそこを直します。
配列を JSX の配列に変える
React でリストを出すときは配列の map を使います。実践JavaScript で書いた map と同じもので、行き先が文字列や数値ではなく JSX になるだけです。
JavaScript (JSX)
const works = [
{ id: 1, title: "レシピ検索アプリ", category: "web" },
{ id: 2, title: "買い物メモツール", category: "tool" },
{ id: 3, title: "写真ギャラリー", category: "web" },
];
export default function App() {
return (
<div className="work-list">
{works.map((work) => (
<div className="work-card">
<h2>{work.title}</h2>
<p>{work.category}</p>
</div>
))}
</div>
);
}works.map(...) が返すのは JSX が3つ入った配列です。JSX の中で波かっこに配列を置くと、React は中身を順番に並べて描いてくれます。3件が30件になっても、書きかえるのは配列のほうだけです。
つまずきどころ
forEach に書きかえてしまうと何も出ません。forEach は戻り値が undefined で、JSX の配列を作ってくれないからです。並べたいときは必ず map を使います。
アロー関数の書き方も間違えやすいところです。丸かっこで包んだ (work) => (<div>...</div>) は書いた JSX がそのまま返りますが、波かっこで包んだ (work) => { <div>...</div> } は何も返りません。波かっこを使うなら return が要ります。
もう1つ、JSX の波かっこの中に書けるのは式だけです。if 文はそのままでは書けません。条件で出し分けたいときの書き方は、このあとのレッスンで扱います。
実行するとコンソールに警告が出ます
上のコードを動かすと、画面は正しく出るのに key に関する警告がコンソールに出ます。これは間違いではなく、React が「どの行がどのデータか教えてほしい」と言っている状態です。次のレッスンで消します。
演習
手で書いていた作品カードを、works 配列からの map に置きかえます。