title: Map through nested object with variable number of fields?
body: <pre class="lang-json prettyprint-override"><code>{
      &quot;pagesections&quot;: [
          {
              &quot;title&quot;: &quot;Executive Board&quot;,
              &quot;sections&quot;: [
                  {
                      &quot;title&quot;: &quot;Co-Founders/Co-Presidents&quot;,
                      &quot;team&quot;: [
                          {
                              &quot;name&quot;: &quot;Emily ZhouWang&quot;,
                              &quot;designation&quot;: &quot;Co-Founder&quot;,
                              &quot;image&quot;: &quot;../images/sample_image.jpg&quot;,
                              &quot;clg&quot;: &quot;Junior at UC Berkeley&quot;,
                              &quot;linkedin&quot;: &quot;&quot;,
                              &quot;description&quot;: &quot;&quot;
                          },
                          {
                              &quot;name&quot;: &quot;Kathleen Kong&quot;,
                              &quot;designation&quot;: &quot;Co-Founder&quot;,
                              &quot;image&quot;: &quot;../images/sample_image.jpg&quot;,
                              &quot;clg&quot;: &quot;Junior at UC Berkeley&quot;,
                              &quot;linkedin&quot;: &quot;&quot;,
                              &quot;description&quot;: &quot;&quot;
                          }
                      ]
                  },
                  {
                      &quot;title&quot;: &quot;Directors&quot;,
                      &quot;team&quot;: [
                          {
                              &quot;name&quot;: &quot;Emily ZhouWang&quot;,
                              &quot;designation&quot;: &quot;Co-Founder&quot;,
                              &quot;image&quot;: &quot;../images/sample_image.jpg&quot;,
                              &quot;clg&quot;: &quot;Junior at UC Berkeley&quot;,
                              &quot;linkedin&quot;: &quot;&quot;,
                              &quot;description&quot;: &quot;&quot;
                          },
                          {
                              &quot;name&quot;: &quot;Kathleen Kong&quot;,
                              &quot;designation&quot;: &quot;Co-Founder&quot;,
                              &quot;image&quot;: &quot;../images/sample_image.jpg&quot;,
                              &quot;clg&quot;: &quot;Junior at UC Berkeley&quot;,
                              &quot;linkedin&quot;: &quot;&quot;,&quot;
                          }
                      ]
                  },
                  {
                      &quot;title&quot;: &quot;Co-Founders/Co-Presidents&quot;,
                      &quot;team&quot;: [
                          {
                              &quot;name&quot;: &quot;Emily ZhouWang&quot;,
                              &quot;designation&quot;: &quot;Co-Founder&quot;,
                              &quot;image&quot;: &quot;../images/sample_image.jpg&quot;,
                              &quot;clg&quot;: &quot;Junior at UC Berkeley&quot;,
                              &quot;linkedin&quot;: &quot;&quot;,
                              &quot;description&quot;: &quot;&quot;
                          },
                          {
                              &quot;name&quot;: &quot;Kathleen Kong&quot;,
                              &quot;designation&quot;: &quot;Co-Founder&quot;,
                              &quot;image&quot;: &quot;../images/sample_image.jpg&quot;,
                              &quot;clg&quot;: &quot;Junior at UC Berkeley&quot;,
                              &quot;linkedin&quot;: &quot;&quot;,
                              &quot;description&quot;: &quot;&quot;
                          }
                      ]
                  }
              ]
          },
          {
              &quot;title&quot;: &quot;Tech Team&quot;
          },
          {
              &quot;title&quot;: &quot;Ambassadors&quot;
          }
      ],
  }
  </code></pre>
  <p>This is how my JSON file looks like. I'm trying to import and use it in following React component. There are three returns. One corresponds to pagesections, another to sections and last one to team. But there seems to be an error. I've tried using this.sections.map() and this.team.map() but it doesn't seem to work either. 'team' and 'sections' are not recognized in that case but here they are recognized but the map function does not seem to work.</p>
  <pre class="lang-js prettyprint-override"><code>{data.pagesections.map((e)=&gt;{  //error is pointed at this line and
                  return (
                      &lt;Grid container direction=&quot;column&quot; className={classes.root}&gt;      
                          &lt;Grid item className={classes.head1} key={e}&gt;  *//this line
                              &lt;Team_Section title={e.title}/&gt;
                          &lt;/Grid&gt;
              
                          {e.sections.map((t)=&gt; {
                              return (
                                  &lt;&gt;
                                  &lt;Grid item key={t}&gt;
                                      &lt;Section_Head title={t.title}/&gt;
                                  &lt;/Grid&gt;
                                  &lt;Grid item container&gt;
                                      &lt;Grid item xs={1} sm={1} md={2}/&gt;
                                      &lt;Grid container spacing={4} justify=&quot;center&quot; item xs={10} sm={10} md={8} align=&quot;center&quot;&gt;
                                      {t.team.map((g)=&gt;{
                                          return (
                                              &lt;Grid item xs={6} key={g}&gt;
                                                  &lt;MediaCard 
                                                      name={g.name}
                                                      designation={g.designation}
                                                      image={g.image}
                                                      clg={g.clg}
                                                      linkedin={g.linkedin}
                                                      description={g.description}/&gt;
                                              &lt;/Grid&gt;
                                          );
                                      })}
                                      &lt;/Grid&gt;
                                      &lt;Grid item xs={1} sm={1} md={2}/&gt;
                                  &lt;/Grid&gt;
                                  &lt;/&gt;
                              );
                          })}
                      &lt;/Grid&gt;
                  );
              })}
  </code></pre>
  <blockquote>
  <p><strong>Error</strong>: TypeError: Cannot read property 'map' of undefined</p>
  </blockquote>