title: How can I render the data in this javascript object with .map()?
body: <p>I constructed the following javascript object by combining data from a firebase database:</p>
  
  <pre><code>[
    {
      "-Lsx4Wzd4k7Xamoxoior": {
        "groupId": "-Lsx4Wzd4k7Xamoxoior",
        "numMembers": 1,
        "groupName": "GroupOne",
        "imageUrl": ""
      },
      "-Lsx4aoXcClZrOMN3zR_": {
        "uid": "-Lsx4aoXcClZrOMN3zR_",
        "numMembers": 1,
        "groupName": "GroupTwo",
        "imageUrl": ""
      },
      "-Lsxzv0N9owZ7cWiH-H_": {
        "uid": "-Lsxzv0N9owZ7cWiH-H_",
        "numMembers": 1,
        "groupName": "GroupThree",
        "imageUrl": ""
      }
    }
  ]
  </code></pre>
  
  <p>I set the groupsData state to this object. I want to use the map() function to render the data of each group in its own view.</p>
  
  <p>Here is what I have tried so far, in my render() method; on loading, it doesn't show anything:</p>
  
  <pre class="lang-js prettyprint-override"><code>  render() {
      return (
        &lt;ScrollView&gt;
          {this.state.groupsData.map(groupData =&gt; {
            return (
              &lt;View&gt;
                &lt;Text&gt;{groupData.groupName}&lt;/Text&gt;
                &lt;Text&gt;{groupData.numMembers} members&lt;/Text&gt;
                &lt;Image source={{ uri: groupData.imageUrl }} /&gt;
                &lt;TouchableOpacity onPress={() =&gt; navigate('GroupScreen', { groupUid: groupData.groupUid })} &gt;
                  &lt;Text&gt;View group&lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
            );
          })}
        &lt;/ScrollView&gt;
      );
    }
  </code></pre>
  
  <p>Any help would be appreciated; I have never worked with map() before.</p>