title: Trying to map elements from object of nested subarrays to a cell in an HTML table, unsure how to reach deepest sub arrays
body: <p>I have a React/TypeScript component I'm building that features an HTML table for contact details. </p>
  
  <p>I'm trying to map the API response to cells in the table and dynamically populate rows for each contact and their details. There are two arrays for <em>phone numbers</em> and <em>addresses</em> that are nested deep within the object and I can't figure out how to iterate over them along with the rest of the data all in one go.</p>
  
  <p>I initially tried nested for loops but I hit a wall when I got to those two elements because of their position in the data object.</p>
  
  <p>I then tried to use <em>.map()</em> in the middle of the <em>for</em> loops, but I hit a TypeScript error stating the element I'm trying to map over could possibly be null.</p>
  
  <p>I thought about iterating over phone number and address arrays separately and then inserting them into the appropriate cells per contact but I can't figure out how to do when I'm using separate for loops to populate the other cells.</p>
  
  <p>Expected Output:</p>
  
  <pre><code>Name | Member | Telephone | Email | Addresses
  
  Ben B| Friend | 610-535-1234 | ben@gmail.com | 123 Fiction Drive,Denver
                  215-674-6789                   234 Dreary Ln,Seattle 
  
  Alice | Family| 267-333-1234 | ally@aim.com  | 437 Chance St, Pitts.
  </code></pre>
  
  <p>I made a CodeSandbox and dropped the current component and example data structure below. For the CodeSandbox it currently loads but as soon as you uncomment these lines you'll see the error</p>
  
  <pre><code>&lt;td&gt;{contacts.contactGroups[i].contacts[j].phoneNumbers}&lt;/td&gt;
  
  &lt;td&gt;{contacts.contactGroups[i].contacts[j].addresses}&lt;/td&gt;
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/crazy-edison-6l6ue?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit crazy-edison-6l6ue"></a></p>
  
  <pre><code>Current Component
  </code></pre>
  
  <pre><code>import React from "react";
  import { Contacts } from "./contact-types";
  
  type Props = {
    contacts: Contacts;
  };
  
  export const ContactsGrid = (props: Props) =&gt; {
  
    const { contacts } = props;
  
    const rows = [];
  
    for (let i = 0; i &lt; contacts.contactGroups.length; i++) {
      rows.push(
        &lt;tr&gt;
          &lt;td&gt;{contacts.contactGroups[i].contactGroup}&lt;/td&gt;
        &lt;/tr&gt;
      );
      for (let j = 0; j &lt; contacts.contactGroups[i].contacts.length; j++) {
        rows.push(
          &lt;tr&gt;
            &lt;td&gt;{contacts.contactGroups[i].contacts[j].fullName}&lt;/td&gt;
            &lt;td&gt;{contacts.contactGroups[i].contacts[j].member}&lt;/td&gt;
            {/* &lt;td&gt;{contacts.contactGroups[i].contacts[j].phoneNumbers}&lt;/td&gt; */}
            &lt;td&gt;{contacts.contactGroups[i].contacts[j].email}&lt;/td&gt;
            {/* &lt;td&gt;{contacts.contactGroups[i].contacts[j].addresses}&lt;/td&gt; */}
          &lt;/tr&gt;
        );
      }
    }
  
    return (
      &lt;table&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;td&gt;Name&lt;/td&gt;
            &lt;td&gt;Member Type&lt;/td&gt;
            &lt;td&gt;Telephone&lt;/td&gt;
            &lt;td&gt;Email&lt;/td&gt;
            &lt;td&gt;Address&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;{rows}&lt;/tbody&gt;
      &lt;/table&gt;
    );
  };
  </code></pre>
  
  <pre><code>Current Data Structure
  </code></pre>
  
  <pre><code>export default {
    count: 1,
    contactGroups: [
      {
        contactGroup: "Family",
        count: 1,
        contacts: [
          {
            member: "Uncle",
            fullName: "BENJAMIN BILLIARDS",
            lastName: "BILLIARDS",
            firstName: "BENJAMIN",
            email: "shark@billiards.com",
            phoneNumbers: [
              {
                telephoneNumber: "123-456-7899",
                type: "mobile"
              },
              {
                telephoneNumber: "610-555-7625",
                type: "work"
              }
            ],
            addresses: [
              {
                addressLine1: "123 FAMILY ST",
                addressLine2: "APT 1208",
                city: "ATLANTA",
                state: "GEORGIA",
                zipCode: "12345"
              },
              {
                addressLine1: "456 WORKING BLVD",
                addressLine2: "",
                city: "ATLANTA",
                state: "GEORGIA",
                zipCode: "12345"
              }
            ]
          }
        ]
      },
      {
        contactGroup: "Friends",
        count: 1,
        contacts: [
          {
            member: "School Friend",
            fullName: "HANS ZIMMER",
            lastName: "ZIMMER",
            firstName: "HANS",
            email: "hans@pirates.com",
            phoneNumbers: [
              {
                telephoneNumber: "267-455-1234",
                type: "mobile"
              }
            ],
            addresses: [
              {
                addressLine1: "789 FRIEND ST",
                addressLine2: "",
                city: "SAN DIEGO",
                state: "CALIFORNIA",
                zipCode: "67890"
              },
              {
                addressLine1: "234 CANARY ST",
                addressLine2: "",
                city: "SEATTLE",
                state: "WASHINGTON",
                zipCode: "67890"
              }
            ]
          }
        ]
      }
    ]
  };
  
  </code></pre>