How to pass each firebase database entries into react - native components in a loop

Question

My Firebase project looks like -

Suppose I have multiple database entries in the announcements, then which is the best way to pass each announcement entry to a react - native component which takes Popup and Longtext as props.

I tried something like this:

returnNotificationCards() { var newArr = this.state.notContainer; return newArr.map((line) => { return <NotificationCards Popup = { line.Popup } longText = { line.Longtext } /> }); } componentDidMount() { let dataContainer firebase.database().ref('/announcements/').on('value', (snapshot) => { snapshot.forEach((childSnapshot) => { var childData = childSnapshot.val(); dataContainer.push(childData) }); }); this.setState({ notContainer: dataContainer }) }

But the code is not working. Here the component to which the Firebase data should be passed is NotificationCards.

tonyjosi · Accepted Answer · 2018-07-17 11:10:30Z

It worked fine when I passed firebase data from the parent component of the current component via goToNotifications()

goToNotifications() { var dataContainer = [] firebase.database().ref('/announcements/').on('value', (snapshot) => { snapshot.forEach((childSnapshot) => { var childData = childSnapshot.val(); dataContainer.push(childData); }); Actions.Notifications({ dataContainer }) }); }

And returned to NotificationCards component through the current component via displayNotifi()

displayNotifi() { var fetcheData = this.props.dataContainer; return fetcheData.map((line) => { return <NotificationCards Popup = { JSON.stringify(line.Popup).replace(/\"/g, "") } longText = { JSON.stringify(line.Longtext).replace(/\"/g, "") } /> }); }

Collectives™ on Stack Overflow

How to pass each firebase database entries into react - native components in a loop

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related