【React】JavaScriptのmapを使ってdivコンポーネントを繰り返し生成する方法

はじめに

JavaScriptでは配列を繰り返し処理することが多くあります。その時に使えるのがとなる関数がmap()メソッドです。ここではこのmapメソッド具体的な使用例を含めて紹介していきたい思います。

配列.mapを使用した繰り返し処理

オブジェクトの配列をmapで繰り返す例

let objList = [ {"name":"太郎", "age":30}, {"name":"二郎", "age":20} ];

objList.map((value, index) => {
    console.log(value); //{"name":"太郎", "age":30} ,  {"name":"二郎"," age:20}
});

Reactコンポーネントをmapで繰り返す例

次にReactコンポーネント内部で.map()メソッドを使った方法について説明します。以下のような書き方が一般的です:

const objects = [
  {id: 'id1', name:'name1'},
  {id: 'id2', name:'name2'},
  //...
]

class ComponentWithRepeatedDivs extends React.Component {
    render(){
        return (
            <div>
                {objects.map(obj) =>
                    <div key={obj.id}>
                        ID:{obj.id}, Name:{obj.name}
                    </div>
                )}
            </div>
        );
    }
}

ReactDOM.render(<ComponentWithRepeatedDivs />, document.getElementById('root'));

まとめ

今回は、JavaScriptのmapメソッドとReactでdivを描画する方法について紹介しました。非常に利用できるシーンが多いのでぜひ使ってみてください。