title: ReactJS - Map inside a map
body: <p>I am working on a ReactJS &amp; Redux app. At some point, I have a list of elements (notes), each one of them having an array (subtasks). I would like to display all the elements, and for each of them, display the content of their array.</p>
  
  <p>I tried this :</p>
  
  <pre><code> render(){
      return(
          &lt;div&gt;
              &lt;h3&gt;{this.props.match.params.user}'s board&lt;/h3&gt;
  
              &lt;Link to={`/settings/${this.props.match.params.user}`}&gt;
                  &lt;button&gt;Settings&lt;/button&gt;
              &lt;/Link&gt;
  
              &lt;Link to={`/new/${this.props.match.params.user}`}&gt;
                  &lt;button&gt;Add note&lt;/button&gt;
              &lt;/Link&gt;
  
              {
                  this.props.notes.map((item,index) =&gt; 
                      &lt;Link to={`/details/${item.name}`}&gt;
                          &lt;h4 key={index}&gt;{item.name}&lt;/h4&gt;
  
                          item.subtasks.map((sub, subindex)=&gt;
                              &lt;p key={subindex}&gt;{sub}&lt;/p&gt;)
  
                      &lt;/Link&gt;
                  )
              }
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>But I got:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: subindex is not defined</p>
  </blockquote>
  
  <p>What's the right way to do it?</p>