title: How to display the content of an array inside an object in Reactjs
body: <p>I have a React component. When the user makes a form selection, it retrieves the following object (the content of the object varies depending on the selection made):</p>
  
  <p><strong>Data</strong></p>
  
  <pre><code>jsonObj={
   "name":"main",
   "type":"meat",
   "values":[
        ["chicken","Roast chicken with vegetables"],
        ["beef","Beef and Yorkshire pudding"]
  ]}
  </code></pre>
  
  <p><strong>Desired results</strong></p>
  
  <p>Here's what I want to display on screen when rendered:</p>
  
  <pre><code>&lt;div&gt;
      &lt;label htmlFor="chicken"&gt;Roast chicken and vegetables&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label htmlFor="beef"&gt;Beef and Yorkshire pudding&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My failed attempt!</strong></p>
  
  <pre><code>Object.entries(jsonObj["values"]).map(([val,index]))=&gt;{
      return(
          &lt;div&gt;
              &lt;label htmlFor={val[index][0]}&gt;{jsonSub[key][1]}:&lt;/label&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>The result of this is:</p>
  
  <blockquote>
    <p>Cannot read property '0' of undefined.</p>
  </blockquote>
  
  <p>And when I try it in the browser console I get "Uncaught SyntaxError: Malformed arrow function parameter list". Is anyone able to help me get my desired results?! </p>
  
  <p>Many thanks!</p>
  
  <p>Katie</p>