React JSXの中でfor文やif文を使う方法(備忘録)

JSXの中でfor文やif文を使う

1.即時関数を使う

Reactでは、JSXで直接for文やif文などの文を記述することができません。
以下のように、JSXの中で即時関数を使うことで、for文やif文を使うことができるようになります。

test

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

上のコードの場合、以下のように表示されます。

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

2.mapを使う

また、Listの内容を表示したい場合などは、mapを使うことで同様にループさせることができます。以下の例では二重ループをmapを使って実装しています。

test

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>
  );
}