一覧データを表示する

4 分

React は JavaScript と XML および HTML の組み合わせである JSX に基づいているため、JavaScript と完全に統合された HTML を動的に生成できます。

シナリオ

あなたは、準備済みとマークされた項目に取り消し線を追加するなど、材料の一覧を表示したいと考えています。そのために、スタイル用の新しい .css ファイルを作成し、材料一覧の新しいコンポーネントを作成します。

新しいスタイルを作成する

src に IngredientList.css という名前の新しいファイルを作成します。
次のコードを IngredientList.css に追加します。
```
.prepared {
    text-decoration: line-through;
}
```

コンポーネントを作成する

HTML は JSX の JavaScript と統合されているため、ロジックとループには JavaScript に依存します。配列に含まれる項目のセットを表示するには、通常、map 関数を使用します。 map は、関数呼び出しの結果に基づいて項目の新しい配列を作成するように設計されています。タイトルのリストを順序指定済みリストで表示する場合は、map と前に学習した { } 構文の両方を使用します。

src 内に、IngredientList.jsx という名前の新しいファイルを作成します。

次のコードをファイルに追加します。

import './IngredientList.css'
import React from 'react';

function IngredientList(props) {
    // Create the list items using map
    const ingredientListItems = props.ingredients.map((ingredient, index) => {
        return (
            // Return the desired HTML for each ingredient
            <li key={index} className={ ingredient.prepared ? 'prepared' : '' }>
                { ingredient.name }
            </li>
        );
    });

    // return the HTML for the component
    // ingredientListItems will be rendered as li elements
    return (
        <ul>
            { ingredientListItems }
        </ul>
    );
}

export default IngredientList;

コードを調べる

まず、ingredients の一覧を格納する文字列の配列を作成します。各材料をリストアイテムとして表示する必要があります。 map を使用してこれを実装します。

前に取り上げたように、map の動作は for each ステートメントと似ています。配列内の項目ごとに関数が 1 回実行されます。 li HTML 要素のコレクションを表示したいので、li 内に {ingredient} を含む適切な JSX を返します。

IngredientList を使用するようにアプリを更新する

材料の一覧を表示しましょう。

src/app.jsx を開きます。
TODO: Import IngredientList という行の後に、次のコードを追加します。
```
// TODO: Import IngredientList
import IngredientList from './IngredientList'
```
TODO: Add IngredientList component という行の後に、次の JavaScript を追加します。
```
{/* TODO: Add IngredientList component */}
<IngredientList ingredients={recipe.ingredients} />
```

結果を表示する

すべてのファイルを保存します。ブラウザーは自動的に更新され、新しい更新が表示されます。材料の一覧に注目してください。最後の 2 つの項目は取り消し線が引かれ、準備済みと示されています。

Screenshot of list of ingredients.