Within my React Native app, there's a page called RepsPage that displays a scroll view using an array of IDs. I'm passing this array to a function named renderRep, attempting to create a view for each item in the array. However, the return statement appears empty. Despite thorough debugging, it seems like the object retrieved from the database is indeed being passed through, containing content ready for display. Yet, this content fails to reach the return function. Various attempts have been made to fix this issue (including placing the return function inside the Firebase query), but so far nothing has proven successful. Below is the relevant code:
export default class RepsPage extends Component {
renderRep(repID){
var rep = new Firebase('https://ballot-app.firebaseio.com/congressPerson');
var nameView;
var partyView;
//The entire function does not seem to execute properly
rep.orderByChild("bioguideId").equalTo(repID).on("child_added", function(snapshot) {
console.log(snapshot.val());
nameView = <View style ={styles.tagContainer}>
<Text>{snapshot.val().name}</Text>
<Text>{snapshot.val().party}</Text>
</View>
});
return (
nameView
);
}
render(){
var user = this.props.user;
var reps = user.representatives;
return (
<ScrollView
automaticallyAdjustContentInsets={false}
scrollEventThrottle={200}
style={styles.scrollView}
>
{ reps.map(this.renderRep.bind(this)) }
</ScrollView>
);
}
}