render()内でループ処理

課題

アイテム一覧コンポーネントの確認用に、ダミーデータを作って表示させたいが、
render内でfor文を書くにはどうすればよいか。

対応

JSX内に直接forを埋め込もうとしても上手くいかない。
なのでrender()内で事前に配列データを生成してからそれを
JSXに渡す。

import React from 'react';
import Item from '../components/Item';

//アイテム一覧
class Items extends React.Component {
    render() {
        const items = [];
        //アイテムを10件生成
        for (let i = 0; i < 10; i++) {
            items.push(
                <Item/>
            )
        }
        return (
            <div id="items-grid" className="d-flex flex-wrap">
                {items}
            </div>
        )
    }
}
export default GridItems;