title: Given a number, how to render multiple html element?
body: <p>I would like to pass props <code>noOfIcons</code> to my ChartLegend component and if there is noOfIcons value then I would like to render the given number of icons. So if noOfIcons = 2 then render 2 <code>&lt;Icon/&gt;</code>. I've tried the following but it always renders only 1 <code>&lt;Icon/&gt;</code>, What am I missing? &amp; if there is a simple way to handle this please suggest. Many thanks.</p>
  <pre><code> &lt;ChartLegend iconName={&quot;square-full&quot;} noOfIcons={2} label={'label'} /&gt;
  </code></pre>
  <pre><code>const ChartLegend = props =&gt; {
  
      const { iconName, label, noOfIcons = 2 } = props;
  
      const renderIcons = () =&gt; {
  
          if (!noOfIcons) {
              return &lt;Icon
                  name={iconName}
                  type='solid'
              /&gt;;
          }
          else {
              for (let i = 0; i &lt; noOfIcons; i++) {
                  return &lt;Icon
                      name={iconName}
                      type='solid'
                  /&gt;;
              }
          }
      };
  
      return (
          &lt;Col&gt; 
              {renderIcons()} 
              {label}
          &lt;/Col&gt;
      );
  };
  
  export default ChartLegend;
  
  
  </code></pre>