mapでリスト描画

React入門 / 全 6 枚

手書きをmapにする

3枚を手でコピーする代わりに、配列から作ります。

手でコピー

<div className="work-card">
  <h2>レシピ検索アプリ</h2>
</div>
<div className="work-card">
  <h2>買い物メモツール</h2>
</div>

works.mapで作る

{works.map((work) => (
  <div className="work-card">
    <h2>{work.title}</h2>
  </div>
))}

作品が増えても、書きかえるのは配列だけです。

1 / 6

← → キーでも送れます