つくる - ItemCard(TS)
第1章のまとめとして作る
新しいことは出てきません。ここまでの4つを組み合わせて、fleama の商品カードを完成させます。
- props の型 —
Itemを定義してitemを丸ごと受け取る - state の型 —
useState<Item[]>で一覧を持つ - イベントの型 — 今回は使いません
- children の型 —
Cardの枠に差し込む
売り切れを型で表す
fleama の商品には「販売中」と「売り切れ」があります。これを string で持つと、"sold" "SOLD" "売切" のように書き方がばらけて、比べるところで必ず事故ります。
取りうる値が決まっているなら、それを型に書きます。
type Item = {
id: string;
title: string;
price: number;
status: "onSale" | "sold";
};"onSale" | "sold" は「このどちらかしか入らない」という意味です。TypeScript入門で出てきたユニオン型です。status: "SOLD" と書けばその場で怒られます。打ち間違いを型で潰すのが、TypeScript を使う一番の見返りです。
状態で表示を変える
売り切れなら札を出します。
{item.status === "sold" && <span className="sold">売り切れ</span>}&& の左が真のときだけ右が描かれます。React入門でやった条件付きの表示です。
演習
3件の商品を並べ、売り切れのものには札を出します。