React Native Function not returning

Question

I have a page in my React Native app, RepsPage , that renders a scroll view based on an array of ID's. I'm passing this array to a another function renderRep and trying to return a view for each item in the array but the return is just empty. I've tried debugging it and seems like the object from the database is being passed through and there is definitely content to be displayed, but it just isn't making it's way to the return function. I've tried multiple iterations of this (having the return function inside Firebase query) but nothing seems to work. Code attached:

export default class RepsPage extends Component {

renderRep(repID){
        var rep = new Firebase('https://ballot-app.firebaseio.com/congressPerson');       
        var nameView;
        var partyView;
        //entire function not executing? 
        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>
    );
}
}

Answer 1

Your renderRep method should set the state instead of returning a value.

Something like this. Be aware the fact that i tried to code this 'blind':

export default class RepsPage extends Component {
    construct() {
        this.state = {
            snapshots: []
        }
    }

    componentDidMount(){
        this.fetchRep('someid');
    }

    fetchRep(repID) {
        var rep = new Firebase('https://ballot-app.firebaseio.com/congressPerson');
        var nameView;
        var partyView;
        //entire function not executing?

        rep.orderByChild("bioguideId").equalTo(repID).on("child_added", (snapshot)=> {
            console.log(snapshot.val());
            this.setState({snapshots: [].concat(this.state.snapshots, [snapshot.val()])});
        });
    }

    renderRep() {
        return this.state.snapshots.map((snapshot)=>
            <View style={styles.tagContainer}>
                <Text>{snapshot.name}</Text>
                <Text>{snapshot.party}</Text>
            </View>
        );
    }

    render() {
        var user = this.props.user;
        var reps = user.representatives;

        return (
            <ScrollView
                automaticallyAdjustContentInsets={false}
                scrollEventThrottle={200}
                style={styles.scrollView}
            >
                { this.renderRep.bind(this) }
            </ScrollView>
        );
    }
}