title: Rendering react in a conditional for loop
body: <p>I have a static information in web page.</p>
  
  <pre><code>class MyStaticWebPage extends React.Component {
    render() {
      return (
        &lt;TopContainer&gt;
          &lt;IconListContainer&gt;
            &lt;LeftButton
              Icon={MyIcon1}
              color="#ffffff"
              text="text1"
            /&gt;
            &lt;CenterButton
              Icon={MyIcon2}
              color="#eeeeee"
              text="text2"
            /&gt;
            &lt;RightButton
              Icon={MyIcon3}
              color="#dddddd"
              text="text3"
            /&gt;
          &lt;/IconListContainer&gt;
          &lt;IconListContainer&gt;
            &lt;LeftButton
              Icon={MyIcon4}
              color="#cccccc"
              text="text4"
            /&gt;
          &lt;/IconListContainer&gt;
        &lt;/TopContainer&gt;
      );
    }
  }
  </code></pre>
  
  <p>This page is statically display in a row list, per line maximum three icons, and now I want to turn them dynamically, suppose I store icon props in a props array.</p>
  
  <pre><code>[
    {
      icon: 'MyIcon1',
      color: '#ffffff',
      text: 'text1'
    },
    {
      icon: 'MyIcon2',
      color: '#eeeeee',
      text: 'text2'
    },
    {
      icon: 'MyIcon3',
      color: '#dddddd',
      text: 'text3'
    },
    {
      icon: 'MyIcon4',
      color: '#cccccc',
      text: 'text4'
    }
  ]
  </code></pre>
  
  <p>Finally make page automatically rendered using this props array.</p>
  
  <pre><code>class MyStaticWebPage extends React.Component {
    render() {
      var rows = []
      for (var i = 0; i &lt;= parseInt(iconNum / 3); i++) {
        // row level for loop
        // rows.push(row)
        for (var j = iconNum; j % 3 !== 0; j--) {
          // icon level for loop
          // rows.push(icon)
        }
      }
      return (
        &lt;TopContainer&gt;
          {rows}
        &lt;/TopContainer&gt;
      );
    }
  }
  </code></pre>
  
  <p>How to do with this through realistic react code?</p>