メニュー一覧をmapで描画せよ

初段 / 目安 20分

問1で作った MenuCard を並べていたら、陽葵さんがまた首をかしげます。「部品を8個並べるのも手書きなの? データを渡したら勝手に並んでほしいな〜」。

もっともな話です。メニューが増えるたびに JSX を1行ずつ足すのでは、データと見た目が2か所に分かれてしまいます。React では、配列を map で JSX の配列に変えて、それをそのまま JSX の中に置けます。

初期コードには menus という配列がすでに用意してあります。中身は { id, name, price } のオブジェクトです。この配列を menus.map(...) に掛けて、1件につき MenuCard を1つ返す形にしてください。返ってきた配列を波かっこで包んで JSX に置けば、要素の数だけカードが並びます。

ここで1つ約束事があります。繰り返しで並べた要素には key を付ける ことです。React は前回描いた並びと今回の並びを見比べて、差分だけを画面に反映します。そのとき、どれとどれが同じものかを見分ける目印が key です。付けないと警告が出ますし、並べ替えや削除が入ったときに中身が入れ替わる不具合の元になります。key に配列の添字を使うのは避けて、データが持っている id を渡してください。

key は MenuCard の props としては受け取れません。React が自分で使う特別な属性なので、<MenuCard key={m.id} ... /> と書いても MenuCard の中の props には key は入ってきません。それでいいのです。

完成条件

• menus 配列を map で展開して MenuCard を並べる
• 並べた要素それぞれに、データの id を key として渡す
• カードは className="card" の要素で、h3 の商品名と className="price" の値段を持つ
• 配列の件数ぶんカードが並ぶ

進め方

map は配列の1件ずつに関数を掛けて、返り値を集めた新しい配列を作ります。ここで返すのは JSX なので、結果は JSX の配列になります。

アロー関数で m => <MenuCard ... /> のように1つの式を返す形にすると短く書けます。波かっこで本体を包む書き方にしたときは、return を書き忘れないでください。書き忘れると何も返らないので、画面には何も出ません。

カードが1枚も出ないときは、map の結果を JSX の中に置き忘れていないか確かめてください。menus.map(...) と書いただけでは画面には出ません。波かっこで包んで JSX の中に置いて初めて描かれます。

JS 道場の問6では、同じことを createElement と appendChild を並べて書きました。並べて見比べてみてください。

ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。