CODEWITHSUNDEEP
javascriptreactjsreact-native
AH.
AH.

Reputation: 813

How to map through firebase results in Javascript React Native

This is my firebase fetching function and I store that into inboxMessages variable.

inboxMessageFetch(mobileNumber) {
            return firebase.database().ref(`${mobileNumber}/inbox`)
                .on('value', snapshot => {
                    console.log('FB', snapshot.val());
                    this.inboxMessages = snapshot.val();
                });
    }

The following is the firebase result received from the Firebase server.

Array [
  undefined,
  Object {
    "from": "Joseph's",
    "fromId": 123456,
    "message": "Hello this is important!",
    "time": "10:20AM",
  },
  Object {
    "from": "Anglo",
    "fromId": 123,
    "message": "This message is a test message",
    "time": "10:30PM",
  },
]

I use a getter function to get the inboxMessages value which is getInboxMessages.

I want to show the result in an ListView 

<List>
          {
            this.props.inboxStore.getInboxMessages.map((l, i) => (
              <ListItem
                key={i}
                leftIcon={{ name: 'user-circle-o', type: 'font-awesome', style: {color: 'blue'} }}
                title={l.from}
                titleStyle={{color: 'red'}}
                subtitle={l.message}
                rightTitle='11:00am'
                rightTitleStyle={{color: 'green'}}
              />
            ))
          }
        </List>

I get the following error. enter image description here

Upvotes: 0

Views: 1030

Answers (1)

guramidev
guramidev

Reputation: 2238

Change the handling of database data from:

this.inboxMessages = snapshot.val();

To:

this.inboxMessages = snapshot.val().filter(v => v);

This will eliminate any falsy values like undefined and you won't get that kind of error.

Upvotes: 2

Related Questions