title: React / JSX Dynamic Number of Components
body: <p>In React, is it possible to render a variable number of HTML tags or React Components? </p>
  
  <p>For example, in the code below, <code>this.renderStats()</code> can render 0 to 2 <code>&lt;i&gt;</code> tags depending on the variables <code>stats.health</code> and <code>stats.energy</code>.</p>
  
  <p>The following code prints out <code>[object Object]</code></p>
  
  <pre><code>class Hero extends React.Component {
  
      showBadges(stats) {
          let badgeList = []
          if (stats.health &gt; 1000) {
              badgeList += &lt;i className="fa fa-times-circle" style={{color: "red"}}&gt;&lt;/i&gt;
          }
          if (stats.energy &gt; 100) {
              badgeList += &lt;i className="fa fa-times-circle" style={{color: "blue"}}&gt;&lt;/i&gt;
          }
          return badgeList;
      }
  
      renderStats() {
          return this.props.users.map((stats) =&gt; {
              return (
                  &lt;Td className="align-middle" column="badges"&gt;{ this.showBadges(stats) }&lt;/Td&gt;
              );
          });
      }
  
      render() {
          return ( 
              &lt;Table&gt;
                  { this.renderStats() } 
              &lt;/Table&gt;
          );
      }
  
  }
  </code></pre>