React map()を使用してみる

Reactのmap()とは

配列データに対して繰り返し処理を実装するための関数です。
以下の様な形式で使用します。
※React入門はこちらからどうぞ

※こちらはUdemy
での学習メモです。

＜配列変数＞.map(＜配列の中身＞, ＜配列のindex（順番＞, ＜処理している配列自体＞)

サンプル（配列の中身を画面に表示）

import React, { Component } from 'react';

const App = () => {

   // ①配列を定義
  const testArr = [
     {title: "name1", detail: "detail1"},
     {title: "name2", detail: "detail2"}
  ]

  return (
     // ②map()関数で定義した配列をLoopさせる。
     testArr.map((val) => {
        // ④下で定義した関数に配列の値を引数とし渡して画面表示
       return <Component_test props1={val.title} props2={val.detail}/>
     })
   )

}
// ③Loop内で呼び出す関数を定義
const Component_test = (val) => {
        return <div>{val.props1}, {val.props2}</div>
}
export default App;

propsの使い方はこちらを参照ください。

以下のコマンドでサーバを起動して表示確認

% yarn start

正しく画面に表示されることを確認しました。