reactでfor文を回して回数分タグを生成した時の話

やったこと

reactでstateの持つ数値分for文で回して、
その回数分divタグを生成するというものを作りました。
その時の仕組みがわからなかったので教えてください。

コード

import React from 'react';

class test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 10,
    };
  }

  render() {
    const aaa = [];
    for (let i = 0; i < this.state.count; i += 1) {
      aaa.push(<div key={i}>{i}</div>);
    }

    return (
      <div>
        {aaa}
      </div>
    );
  }
}

export default test;

やっていること

stateに任意の数(今回は10)を持たせて、
その分、for文を回し、空の配列aaaにpushしていく。

render内のreturnの中のdiv内に{aaa}と指定すると配列分divが生成されていることがわかる。

わからないこと

for文で回し空の配列にpushするとこまではわかったが、
render内のreturnの中で{aaa}と指定するだけで
配列分タグが生成されているのがわからない。

{aaa[0]}と添字を指定すれば0番目の要素だけ表示されるのは理解できるが
なぜ添字を指定しないで全て出るのかわからない。。

行動規範の内容に同意します

回答3件

ベストアンサー

JSXの仕様で引っかかっているのかなと思いました。

あなたの書いたコード

javascript
1    return (
2      <div>
3        {aaa}
4      </div>
5    );

Reactが内部的に変換した結果のコード

javascript
1    return  React.createElement(
2      'div',
3      {},
4      React.createElement('div', { key: 0 }, 0),
5      React.createElement('div', { key: 1 }, 1),
6      ..........
7    );