React でオブジェクトの配列をマップする

React ライブラリの多くの優れた機能の 1つは、非常に動的で、特定の要素を動的にレンダリングしたり、レンダリングしないことができることです。

多くの場合、Web 開発者は大量のデータを持っていて、それを画面に表示したいと考えています。通常、データはオブジェクトの配列としてフォーマットされています。 この記事では、React でオブジェクトの配列をマップする方法を示し、この操作の使用例について説明します。

map() メソッドを使用して、React でオブジェクトの配列をマップする

React ライブラリは JavaScript に基づいているため、map() などのメソッドを使用してオブジェクトの配列を調べることができます。 多くの場合、外部データはオブジェクトの配列として保存されます。 したがって、React で Web アプリケーションを開発する場合、オブジェクトの配列をマップする必要があることがよくあります。

JavaScript で配列をループする方法はいくつかあります。 for ループ、forEach() メソッド、または while ループを使用することもできます。

オブジェクトの配列を調べて、JSX 内で新しい React 要素またはコンポーネントを生成できるため、すべての Web 開発者は map() を使用することを好みます。

JSX は、React コンポーネントのレイアウトを構築するための特別な HTML に似た構文です。 これにより、JavaScript 式を HTML コードのように見えるものに埋め込むことができます。

これにより、React の要素、コンポーネント、および値を動的に生成することが容易になります。 配列を反復する他の方法は JSX 内ではサポートされていません。サポートされているメソッドは map() だけです。

React でオブジェクトの配列をマップする方法の例を見てみましょう。

export default function App() {
  const arr = [
    { name: "Irakli", height: 180 },
    { name: "Chris", height: 190 },
    { name: "Michael", height: 176 },
    { name: "John", height: 182 },
    { name: "Todd", height: 198 },
    { name: "Jack", height: 178 }
  ];
  return (
    <div className="App">
      {arr.map((person) => (
        <div
          style={{
            border: "2px solid black",
            margin: "30px auto",
            width: "30%"
          }}
        >
          <p>name: {person.name}</p>
          <p>height: {person.height}</p>
        </div>
      ))}
    </div>
  );
}

このコード例では、オブジェクトの単純な配列があります。 配列内の各項目は 1 人の人物を表します。

CodeSandbox のライブ デモ をチェックして、map() メソッドが何をレンダリングするかを確認できます。

JSX 内 (return ステートメント内) で、.map() メソッドを使用して、配列内のすべての項目を調べました。

map() メソッドは引数を 1つ取ります。これは、配列内のすべてのアイテムに対して実行されるコールバック関数です。 コールバック関数は、配列内のすべての項目に対して 1つの引数を取ります。

この場合、メソッドはオブジェクトの配列全体を処理し、配列内の各項目が person 引数として使用されます。 ご覧のとおり、person 引数の name および height プロパティを取得し、これらを使用して、出力内の 2つの <p> 要素の値を生成します。

JSX で JavaScript 式 (map() メソッドの実行など) を記述するには、それらを中かっこで囲む必要があることを忘れないでください。

最終的に、map() メソッドは、オブジェクトの配列を React 要素 (またはコンポーネント) の配列に変換する新しい配列を出力します。