title: Mapping over deep nested object array JSON file
body: <p>I have an nested JSON file that I'm trying to mapping from. As you can see in the JSON example and the return of my console.log below it returns <code>object</code> and I can't go further than that. (Please, keep in mind I still working on my JS knowledge...)</p>
  <p>I need some help to <code>map</code> a nested object/array. One important notice, it's a <code>map</code> inside <code>map</code>.</p>
  <p>Here is the <em><strong>GitHub repository</strong></em>: <code>https://github.com/clovis-rosa/menu-data-mapping</code></p>
  <p>To put more context on it, the result should look like the <code>Footer</code> of this website <code>https://www.abstract.com/blog</code></p>
  <p>Here is an example of JSON data that I'm trying to <code>map</code> from:</p>
  <pre><code>{
    &quot;data&quot;: [
      {
        &quot;title&quot;: &quot;Product&quot;,
        &quot;id&quot;: &quot;001&quot;,
        &quot;url&quot;: [
          {
            &quot;id&quot;: &quot;012&quot;,
            &quot;linkName&quot;: &quot;How it Works&quot;,
            &quot;linkUrl&quot;: &quot;how-it-works&quot;
          },
          {
            &quot;id&quot;: &quot;013&quot;,
            &quot;linkName&quot;: &quot;Enterprise&quot;,
            &quot;linkUrl&quot;: &quot;enterprise&quot;
          },
          {
            &quot;id&quot;: &quot;014&quot;,
            &quot;linkName&quot;: &quot;Pricing&quot;,
            &quot;linkUrl&quot;: &quot;pricing&quot;
          }
        ]
      },
      {
        &quot;title&quot;: &quot;Features&quot;,
        &quot;id&quot;: &quot;002&quot;,
        &quot;url&quot;: [
          {
            &quot;id&quot;: &quot;022&quot;,
            &quot;linkName&quot;: &quot;Version Control&quot;,
            &quot;linkUrl&quot;: &quot;version-control&quot;
          },
          {
            &quot;id&quot;: &quot;023&quot;,
            &quot;linkName&quot;: &quot;Design Collaboration&quot;,
            &quot;linkUrl&quot;: &quot;design-collaboration&quot;
          },
          {
            &quot;id&quot;: &quot;024&quot;,
            &quot;linkName&quot;: &quot;Developer Handoff&quot;,
            &quot;linkUrl&quot;: &quot;developer-handoff&quot;
          }
        ]
      },
      {
        &quot;title&quot;: &quot;Resources&quot;,
        &quot;id&quot;: &quot;003&quot;,
        &quot;url&quot;: [
          {
            &quot;id&quot;: &quot;032&quot;,
            &quot;linkName&quot;: &quot;Getting Started&quot;,
            &quot;linkUrl&quot;: &quot;getting-started&quot;
          },
          {
            &quot;id&quot;: &quot;033&quot;,
            &quot;linkName&quot;: &quot;Blog&quot;,
            &quot;linkUrl&quot;: &quot;blog&quot;
          },
          {
            &quot;id&quot;: &quot;034&quot;,
            &quot;linkName&quot;: &quot;Books&quot;,
            &quot;linkUrl&quot;: &quot;books&quot;
          }
        ]
      },
      {
        &quot;title&quot;: &quot;Community&quot;,
        &quot;id&quot;: &quot;004&quot;,
        &quot;url&quot;: [
          {
            &quot;id&quot;: &quot;042&quot;,
            &quot;linkName&quot;: &quot;Twitter&quot;,
            &quot;linkUrl&quot;: &quot;twitter&quot;
          },
          {
            &quot;id&quot;: &quot;043&quot;,
            &quot;linkName&quot;: &quot;LinkedIn&quot;,
            &quot;linkUrl&quot;: &quot;linkedin&quot;
          },
          {
            &quot;id&quot;: &quot;044&quot;,
            &quot;linkName&quot;: &quot;Facebook&quot;,
            &quot;linkUrl&quot;: &quot;facebook&quot;
          }
        ]
      },
      {
        &quot;title&quot;: &quot;Company&quot;,
        &quot;id&quot;: &quot;005&quot;,
        &quot;url&quot;: [
          {
            &quot;id&quot;: &quot;052&quot;,
            &quot;linkName&quot;: &quot;About us&quot;,
            &quot;linkUrl&quot;: &quot;about-us&quot;
          },
          {
            &quot;id&quot;: &quot;053&quot;,
            &quot;linkName&quot;: &quot;Careers&quot;,
            &quot;linkUrl&quot;: &quot;careers&quot;
          },
          {
            &quot;id&quot;: &quot;054&quot;,
            &quot;linkName&quot;: &quot;Legal&quot;,
            &quot;linkUrl&quot;: &quot;legal&quot;
          }
        ]
      }
    ]
  }
  
  </code></pre>
  <p>He is my component where I'm trying to <code>map</code> the data:</p>
  <pre><code>export default function Footer() {
    const allFooterList = UseFooterDataQuery().allDataJson.edges
  
    return (
      &lt;FooterSection&gt;
        &lt;FooterContainer&gt;
          {allFooterList.map(({ node }) =&gt; {
            console.log(node, `====================&gt; NODE`)
            return (
              &lt;FooterWrap key={node.id}&gt;
                &lt;h3&gt;{node.title}&lt;/h3&gt;
                {node.data.map(data =&gt; {
                  console.log(data, `====================&gt; DATA`)
                  return (
                    &lt;ul key={data.id}&gt;
                      &lt;li&gt;
                        &lt;Link to={`/${data.linkUrl}`}&gt;{data.linkName}&lt;/Link&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                  )
                })}
              &lt;/FooterWrap&gt;
            )
          })}
        &lt;/FooterContainer&gt;
        &lt;FooterContainer&gt;
          &lt;p&gt;© {new Date().getFullYear()}&lt;/p&gt;
          &lt;p&gt;Built with Gatsby&lt;/p&gt;
        &lt;/FooterContainer&gt;
      &lt;/FooterSection&gt;
    )
  }
  </code></pre>
  <p>Here is the result of my console.log. Right now I cant' go further than that to get inside de object:</p>
  <pre><code>Object { id: &quot;35707249-168b-511c-83a0-03724efc2108&quot;, data: (5) […] } ====================&gt; NODE
  Object { id: &quot;001&quot;, title: &quot;Product&quot;, url: (7) […] } ====================&gt; DATA
  Object { id: &quot;002&quot;, title: &quot;Features&quot;, url: (3) […] } ====================&gt; DATA
  Object { id: &quot;003&quot;, title: &quot;Resources&quot;, url: (7) […] } ====================&gt; DATA
  Object { id: &quot;004&quot;, title: &quot;Community&quot;, url: (5) […] } ====================&gt; DATA
  Object { id: &quot;005&quot;, title: &quot;Company&quot;, url: (3) […] } ====================&gt; DATA
  </code></pre>