すべてのカテゴリ

React でリストを表示するには？この記事では、React でリストを表示する方法です。リストのデータの一覧を表示する事は簡単です。しかし、このリストのデータを変更する場合はちょっと複雑です。この記事ではその辺も含めて紹介しています。React はプログラムで表示データを作る！前回の条件によって表示を変える場合と同じで、React を利用する場合には、基本的にプログラムで表示データを作ります。今回の、リストのデータを表示する場合も考え方は同じです。Vue の場合には、「_v-for_」を使って、本来の HTML にはない書き方でリストの中身を表示していました。React の場合は、このような機能が HTML に相当する部分（JSX）にはないので、Typescript(Javascript)で記述する方法を使います。色々書き方はありますが、比較的よく利用されているのは、「_map()_」という予め用意されている関数を使います。この機能を利用する事で、リストのデータを表示するための HTML に相当する記述（JSX）を作る事ができます。以下の部分がそれに相当する部分になります。<ul>  {todos.map(    (todo: Todo): JSX.Element => (      <li>        {todo.text}        <button className="btn btn-secondary" onClick={() => removeTodo(todo)}>          X        &lt