title: Using map to access nested json in react native
body: <p>I am trying to access keys and arrays in my json structure with <code>Array.map()</code> but I'm missing something. 
  Here's my JSON:</p>
  
  <pre><code>    {
      "payload": [
    {
      "id": 1,
      "name": "Atta",
      "brands": [
        {
          "id": 118,
          "name": "Wheatola",
          "subProducts": [
            {
              "id": 858,
              "name": "Chakki Aata",
              "minPrice": 52,
              "maxPrice": 56
            },
            {
              "id": 2,
              "name": "Chakki Atta",
              "minPrice": 222,
              "maxPrice": 236
            }
          ]
        }
      ]
    },
    {
      "id": 16,
      "name": "Rice (Branded)",
      "brands": [
        {
          "id": 25,
          "name": "CookStar",
          "subProducts": [
            {
              "id": 1163,
              "name": "Best Basmati",
              "creditDays": 0,
              "minPrice": 5600,
              "maxPrice": 5600
            },
            {
              "id": 863,
              "name": "Extra Long Grain Basmati",
              "creditDays": 0,
              "minPrice": 7800,
              "maxPrice": 7800
            }
          ]
        }
      ]
    }
  ]
    }
  </code></pre>
  
  <p>I want to access <code>payload.name, payload.brands.name(s), payloads.brands.subproducts.name(s)</code> with <code>Array.map()</code> and render the values in components. How do I access nested json like using map()?
  Expected output is:</p>
  
  <pre><code>Atta, Wheatola, Chakki Aata
  Atta, Wheatola, Chakki Aata
  Rice (Branded), Cookstar, Best Basmati
  Rice (Branded), Cookstar, Extra Long Grain Basmati
  </code></pre>