title: mapping a nested array in react
body: <p>I am trying to dynamically load resume information from a JSON file into a React component.  I am able to get the company, title, and timeframe to load properly, but when I try to get the responsibilities for the position to load I keep getting an error.  </p>
  
  <p>The JSON is designed similar to:</p>
  
  <pre><code>[
  {
    "company": "Company Name",
    "title": ["Position 1", "Position 2"],
    "time": ["January 2017 - Present", "January 2016 - December 2017"],
    "responsibilities": [["Responsibility 1", "responsibility 2", "responsibility 3"],["Thing 1","thing 2", "thing 3"]]
    },
  ]
  </code></pre>
  
  <p>The index of each array corresponds to the same information. IE index 0 is the same title, timeframe and responsibilities.</p>
  
  <p>I have tried several different variations of trying to map into the internal arrays but keep getting various errors</p>
  
  <pre><code>      return (
          &lt;div className='work'&gt;
            {Data.map(({company, title, time, responsibilities, resp}, index)=&gt;
              &lt;div&gt;
                &lt;h1&gt;{company}&lt;/h1&gt;
                {title.map((title, index)=&gt;
                  &lt;div key={index}&gt;
                    &lt;h2&gt;{title}&lt;/h2&gt;
                    &lt;h3&gt;{time[index]}&lt;/h3&gt;
                    {responsibilities.map((respArr)=&gt;
                    &lt;ul key={index}&gt;
                      {respArr.map(resp =&gt;
                      &lt;li&gt;{resp}&lt;/li&gt;
                      )}
                    &lt;/ul&gt;
                    )}
                  &lt;/div&gt;
                )}
              &lt;/div&gt;
            )}
  </code></pre>
  
  <p>The error I am receiving with this code is </p>
  
  <pre><code>TypeError: Cannot read property 'map' of undefined
  (anonymous function)
  src/components/exp.js:14
    11 | {title.map((title, index)=&gt;
    12 |   &lt;div key={index}&gt;
    13 |     &lt;h2&gt;{title}&lt;/h2&gt;
  &gt; 14 |     &lt;h3&gt;{time[index]}&lt;/h3&gt;
       | ^  15 |     {responsibilities.map((respArr)=&gt;
    16 |     &lt;ul key={index}&gt;
    17 |       {respArr.map(resp =&gt;
  </code></pre>
  
  <p>If I remove the section with the responsibilities.map it populates the company, title, and timeframe for the position correctly but I have not been able to also add a UL with a li for each responsibility under each title / timeframe.</p>
  
  <p>The intended output is </p>
  
  <pre><code>Company
  Position 1
  January 2017 - Present
  -Responsibility 1
  -Responsibility 2
  -Responsibility 3
  
  Position 2
  January 2016 - December 2017
  -Thing1
  -Thing2
  -Thing3
  </code></pre>