ReactのJSXで簡単にforeach的なこと

Reactのコンポートでfor (let i: number; i < arr.length; i++) { }

とかだるい。

this.arrにstringの配列があるとして、

<tbody>
  {
    this.arr.forEach.call((item:string, index: number) => {
      return (
        <tr>
          hoge
        </tr>);
    })
  }
</tbody>

だとコンパイル時にエラー出ないと思ったらランタイムでエラー・・・。

<tbody>
  {
    Array.from(this.arr).map((item:string, index: number) => {
      return (
        <tr
          key={`keyName${index}`}
        >
          hoge
        </tr>);
    })
  }
</tbody>

だとOK。keyはその代わり必要になる。

ただし、Array.fromは、「配列型 (array-like) オブジェクトや反復可能 (iterable) オブジェクトから新しい Array インスタンスを生成します。」ってやつ。 もともと配列ならArray.fromが要らないので、 this.arr.map((item:string, index: number) => {でいい。