Reactのfor文レンダリング

Flutter のColumnウィジェットなどのように要素内でTypeScriptのfor文を使用する場合には以下のような方法がある。

即時関数

JSX内で直接for文は書くことはできないため、即時関数を使用する。

render() {
    return (
      <div>
        {
          (function () {
            const list = [];
            for (let i = 0; i < 10; i++) {
              list.push(<li>{i}</li>);
            }
            return <ul>{list}</ul>;
          }())
        }
      </div>
    );
  }

辞書型を使用する。

配列の中身を描画したいだけの場合は辞書型を使用することもできる。

render() {
  return(
    <div>
    {
       Array(10).fill(0).map((val, i) => {
         return (
           <div>
             {
                Array(10).fill(0).map((val2, j) => {
                  return(
                    <button>{i} {j}</button>
                  );
                })
              }
            </div>
          );
        })
    }  
    </div>
  );
}