title: How to loop inside a react const variable in the render method
body: <p>I have a mapped const variable which I use to inject to my return in the render method. My issue is now, the object I am mapping, has a collection of objects itself. I would like to loop through each one and add jsx syntax in. This is what I have:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const tasks = this.state.tasks.map((task) =&gt; {
              var editable = this.state.editableTasks.filter(id =&gt; id === task.Id).length &gt; 0;
              return (
                 &lt;li key={task.Id} className="list-group-item" style={{minHeight: '50px'}}&gt;
                     &lt;div className="pull-left" style={{width: '50%'}}&gt;
                         {editable ? &lt;input type="text" /&gt; : &lt;span&gt;{task.Name}&lt;/span&gt;}
                     &lt;/div&gt;
                     &lt;div className="pull-right" style={{marginTop: '-5px', width: '50%'}}&gt;
                         &lt;div className="pull-right"&gt;
                              &lt;button className="btn btn-default" onClick={() =&gt; {this.AddSubTask(task.Id)}}&gt;Add&lt;/button&gt;
                              &lt;button className="btn btn-default" onClick={() =&gt; { this.EditTask(task.Id)}}&gt;{editable ? 'Save' : 'Edit'}&lt;/button&gt;
                          &lt;/div&gt;
                     &lt;/div&gt;
                 &lt;/li&gt;
                 
              //What I have currently tried:
              //for(var i = 0; i &lt; task.SubTasks.length; i++) {
                  //&lt;ul&gt;
                  //&lt;li&gt;
                  //...etc
                  //&lt;/li&gt;
                  //&lt;/ul&gt;
              //}
  
              //{task.SubTasks.map((subtask) =&gt; {
                  //&lt;ul&gt;
                  //&lt;li&gt;
                  //...etc
                  //&lt;/li&gt;
                  //&lt;/ul&gt;
              //)};
              );
          });
          return (
            &lt;div className="table-wrapper"&gt;
              &lt;div className="task-container"&gt;
                  &lt;h3&gt;{this.props.rowName}&lt;/h3&gt;
              &lt;/div&gt;
              &lt;ul id="tasksContainer"&gt;
                  {tasks}
                  &lt;li className="list-group-item list-group-item-last"&gt;&lt;input type="button" value="Add Task" onClick={this.createTask.bind(this)} className="btn btn-success btn-override" /&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
  
        );</code></pre>
  </div>
  </div>
  </p>
  
  <p>I do apologize for the formatting, couldn't quite get it right. Anyways, so in the const task = declaration, I would like to loop through each task.SubTasks (the collection OF the indexed collection) and add in another unordered list. </p>
  
  <p>I have tried simply writing a for loop but it didn't work, and also trying to write another mapped function, which didn't work either. Is this doable?</p>