title: React - how to map nested object values?
body: <p>I am just trying to map nested values inside of a state object. The data structure looks like so:</p>
  
  <p><a href="https://i.stack.imgur.com/Pvisk.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Pvisk.png" alt="enter image description here"></a></p>
  
  <p>I want to map each milestone name and then all tasks inside of that milestone. Right now I am trying to do so with nested map functions but I am not sure if I can do this. </p>
  
  <p>The render method looks like so:</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>render() {
      return(
        &lt;div&gt;
          {Object.keys(this.state.dataGoal).map( key =&gt; {
              return &lt;div key={key}&gt;&gt;
  
                       &lt;header className="header"&gt;
                         &lt;h1&gt;{this.state.dataGoal[key].name}&lt;/h1&gt;
                       &lt;/header&gt;
                       &lt;Wave /&gt;
  
                       &lt;main className="content"&gt;
                         &lt;p&gt;{this.state.dataGoal[key].description}&lt;/p&gt;
  
                           {Object.keys(this.state.dataGoal[key].milestones).map( (milestone, innerIndex) =&gt; {
                               return &lt;div key={milestone}&gt;
                                        {milestone}
                                        &lt;p&gt;Index: {innerIndex}&lt;/p&gt;
                                      &lt;/div&gt;
                           })}
                       &lt;/main&gt;
  
                     &lt;/div&gt;
          })}
        &lt;/div&gt;
      );
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I think that I could somehow achieve that result by passing the inner index to this line of code: <code>{Object.keys(this.state.dataGoal[key].milestones)</code> so it would look like: <code>{Object.keys(this.state.dataGoal[key].milestones[innerIndex])</code>.</p>
  
  <p>But I am not sure how to pass the <code>innerIndex</code> up. I have also tried to get the milestone name by <code>{milestone.name}</code> but that doesn't work either. I guess that's because I have to specify the key.</p>
  
  <p>Does anybody have an idea? Or should I map the whole object in a totally different way? </p>
  
  <p>Glad for any help,
  Jakub</p>