How can I render the data in this javascript object with .map()?

Question

I constructed the following javascript object by combining data from a firebase database:

[
  {
    "-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": ""
    }
  }
]

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.

Here is what I have tried so far, in my render() method; on loading, it doesn't show anything:

  render() {
    return (
      <ScrollView>
        {this.state.groupsData.map(groupData => {
          return (
            <View>
              <Text>{groupData.groupName}</Text>
              <Text>{groupData.numMembers} members</Text>
              <Image source={{ uri: groupData.imageUrl }} />
              <TouchableOpacity onPress={() => navigate('GroupScreen', { groupUid: groupData.groupUid })} >
                <Text>View group</Text>
              </TouchableOpacity>
            </View>
          );
        })}
      </ScrollView>
    );
  }

Any help would be appreciated; I have never worked with map() before.

Basava · Accepted Answer · 2019-11-06 05:15:57Z

First this the groupData has only one object in array. If I understood properly your use case is to display group data. Modify groupData state value as

const groupData ={
        "-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": ""
        }
    };

This is an object and keys are what firebase is sending. Now use Object.keys() to iterate through. As:

<ScrollView>
            {Object.keys(data).map(key => {
                const group = data[key];
                return (
                    <View>
                        <Text>{group.groupName}</Text>
                        <Text>{group.numMembers} members</Text>
                        <Image source={{ uri: group.imageUrl }} />
                        <TouchableOpacity onPress={() => navigate('GroupScreen', { groupUid: group.groupUid })} >
                            <Text>View group</Text>
                        </TouchableOpacity>
                    </View>
                );
            })}
        </ScrollView>

Hope this helps!

Collectives™ on Stack Overflow

How can I render the data in this javascript object with .map()?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related