万年素人からHackerへの道

万年素人がHackerになれるまで殴り書きするぜ。

  • ・寄付お願いします
    YENTEN:YYzNPzdsZWqr5THWAdMrKDj7GT8ietDc2W
    BitZenny:ZfpUbVya8MWQkjjGJMjA7P9pPkqaLnwPWH
    c0ban:8KG95GXdEquNpPW8xJAJf7nn5kbimQ5wj1

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) => {でいい。