Reactでループする

Code : https://codepen.io/mo4_9/pen/EvgbZM

事前に配列を生成する

class LoopComponent01 extends React.Component {
  render() {
    const items = [];
    for (let i = 0; i < 10; i++) {
      items.push(
        <div class="item">item--{i}</div>
      )
    }
    return (
      <div id="list">
        {items}
      </div>
    )
  }
}

mapを使用する

class LoopComponent02 extends React.Component {
  render() {
    const items = ['Sun', 'Mon', 'Tue', 'Wed'];

    return (
      <ul>
        { items.map(d => {
          return <li>{d}</li>
        }) }
      </ul>
    );
  }
}

map,keyを使用する

keyは差分計算を効率化するため（keyの重複には注意）

class LoopComponent03 extends React.Component {
  render() {
    const items = ['Sun', 'Mon', 'Tue', 'Wed'];

    return (
      <ul>
        { items.map((d, idx) => {
          return <li key={idx}>{idx} : {d}</li>
        }) }
      </ul>
    );
  }
}