title: How to loop and render elements in React.js without an array of objects to map?
body: <p>I'm trying to convert a jQuery component to React.js and one of the things I'm having difficulty with is rendering n number of elements based on a for loop.  </p>
  
  <p>I understand this is not possible, or recommended and that where an array exists in the model it makes complete sense to use <code>map</code>.  That's fine, but what about when you do not have an array?  Instead you have numeric value which equates to a given number of elements to render, then what should you do?</p>
  
  <p>Here's my example, I want to prefix a element with an arbitrary number of span tags based on it's hierarchical level.  So at level 3, I want 3 span tags before the text element.  </p>
  
  <p>In javascript:</p>
  
  <pre><code>for (var i = 0; i &lt; level; i++) {
      $el.append('&lt;span class="indent"&gt;&lt;/span&gt;');
  }
  $el.append('Some text value');
  </code></pre>
  
  <p>I can't seem to get this, or anything similar to work in a JSX React.js component.  Instead I had to do the following, first building a temp array to the correct length and then looping the array.</p>
  
  <p>React.js</p>
  
  <pre><code>render: function() {
    var tmp = [];
    for (var i = 0; i &lt; this.props.level; i++) {
      tmp.push(i);
    }
    var indents = tmp.map(function (i) {
      return (
        &lt;span className='indent'&gt;&lt;/span&gt;
      );
    });
  
    return (
      ...
      {indents}
      "Some text value"
      ...
    );
  }
  </code></pre>
  
  <p>Surely this can't be the best, or only way to achieve this?   What am I missing?</p>