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>
    );
}
}

Apparently, on("child_added",…) is an asynchronous method! You can't return anything from its callback. And I'm pretty sure it's a very bad idea to to fetch resources from within the render method anyway. — Bergi
– Bergi, Commented Mar 9, 2016 at 6:44

Michael Malura · Accepted Answer · 2016-06-10 14:04:44Z

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>
        );
    }
}

Collectives™ on Stack Overflow

React Native Function not returning

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related