title: React - Nested maps to retrieve json data
body: <p>So I'm a bit new to javascript and react in general, so I've been practicing. Right now I was trying to retrieve JSON data and use that to render multiple HTML blocks pretty much like a basic schedule. For example, initially, my JSON was formatted as so</p>
  
  <pre><code>{
    "saturday":[
    {
      "event": 1
    },
    {
      "event": 2
    }
   ]
  }
  </code></pre>
  
  <p>and I used a function like the following to map for each part of the JSON array </p>
  
  <pre><code>initialize = events =&gt; {
    return events.map(this.createBlock)
  }
  </code></pre>
  
  <p>Here createBlock is another function returning the following. </p>
  
  <pre><code>createBlock = events =&gt;{
   return(
      &lt;Scheduled
         event={events.event}   
      /&gt;
   );
  </code></pre>
  
  <p>this way when calling the initialize function in render It would create two event blocks but according to the individual data from createBlock in this case just the event number (Scheduled is just the file in which I format how the data from createBlock will be returned as with styling).</p>
  
  <p>And I called all of this in my jsx with</p>
  
  <pre><code>{this.initialize(data.saturday)}
  </code></pre>
  
  <p>where data is the JSON asset imported in</p>
  
  <p>But now I wanted to do the same but on nested JSON data. So it would look like this. So now instead of directly make multiple event blocks. It would make multiple time blocks each with multiple event blocks inside of them.</p>
  
  <pre><code>"saturday":{
    "time":{
      "9:00": [
        {
          "event": 1
        },
        {
          "event": 2
        }
      ],
      "10:00":[
        {
          "event": 1
        },
        {
          "event": 2
        }
      ]
    }
  }
  </code></pre>
  
  <p>I'm just confused on how to approach this. I was thinking about maybe a nested map but wasn't sure if that was practical. Any advice/help would be appreciated, Thanks. </p>