React - how to map nested object values?

Question

I am just trying to map nested values inside of a state object. The data structure looks like so:

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.

The render method looks like so:

render() {
    return(
      <div>
        {Object.keys(this.state.dataGoal).map( key => {
            return <div key={key}>>

                     <header className="header">
                       <h1>{this.state.dataGoal[key].name}</h1>
                     </header>
                     <Wave />

                     <main className="content">
                       <p>{this.state.dataGoal[key].description}</p>

                         {Object.keys(this.state.dataGoal[key].milestones).map( (milestone, innerIndex) => {
                             return <div key={milestone}>
                                      {milestone}
                                      <p>Index: {innerIndex}</p>
                                    </div>
                         })}
                     </main>

                   </div>
        })}
      </div>
    );
  }

I think that I could somehow achieve that result by passing the inner index to this line of code: {Object.keys(this.state.dataGoal[key].milestones) so it would look like: {Object.keys(this.state.dataGoal[key].milestones[innerIndex]).

But I am not sure how to pass the innerIndex up. I have also tried to get the milestone name by {milestone.name} but that doesn't work either. I guess that's because I have to specify the key.

Does anybody have an idea? Or should I map the whole object in a totally different way?

Glad for any help, Jakub

Answer 1

You can use nested maps to map over the milestones and then the tasks array:

 render() {
  return (
    <div>
      {Object.keys(this.state.dataGoal.milestones).map((milestone) => {
        return (
          <div>
            {this.state.dataGoal.milestones[milestone].tasks.map((task, idx) => {
              return (
              //whatever you wish to do with the task item
              )
            })}
          </div>
        )
     })}
    </div>
  )
}