React-Native Firebase Display array of objects using FlatList

Question

I'm trying to display some Firebase data, but nothing displays.

export default class ListGroupScreen extends Component {
    constructor(){
        super();

        this.state = {
            dataArray: [],
        }

    }

    componentDidMount() {
        let that = this;

        firebase.database().ref('/groups').on('child_added', function (data){
            that.setState({
                dataArray: data.val()
            })

        })
    }

    render() {

        console.log(this.state.dataArray);
        console.log(this.state.dataArray[0]);

        return (
            <List>
                <FlatList
                    data={this.state.dataArray}
                    renderItem={({ item }) => (
                        <ListItem
                            title={<Text>{item.groupTitle}</Text>}
                            time={<Text>{item.groupTime}</Text>}
                        />
                    )}
                />
            </List>
        );
    }
}

The console.log(this.state.dataArray); gives me all the items in the database, but console.log(this.state.dataArray[0]); gives me undefined. as shown here:

This is what the database looks like:

Hristo Eftimov · Accepted Answer · 2019-05-15 08:43:53Z

2

The reason is that .on('child_added') returns a single object for each item in the groups node.

In your case you need to use .once('value'), which will return you a collection (object) with the items, that you have to convert into an array:

firebase.database().ref('/groups').once('value', function(snapshot) {
    var returnArray = [];

    snapshot.forEach(function(snap) {
        var item = snap.val();
        item.key = snap.key;

        returnArray.push(item);
    });

    // this.setState({ dataArray: returnArray })
    return returnArray;  
});

answered May 15, 2019 at 8:43

Hristo Eftimov

16.3k14 gold badges55 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anantha Bhat · Accepted Answer · 2019-05-15 10:39:48Z

FlatList react native component expects data props to be an array. You are passing it as an Object, even though you declared in contractor as an array; but in componentDidMount you are overriding to object. You can change it to an array of Objects.

console.log(this.state.dataArray[0]) definitely give undefined because it is not an array



export default class ListGroupScreen extends Component {
    constructor(){
        super();

        this.state = {
            data: null,
        }

    }

    componentDidMount() {
       const that = this;
       firebase.database().ref('/groups').on('child_added', function (data){
            that.setState({
                data: data.val()
            })

        })
    }

    render() {

        const dataArray = Object.values(this.state.data)

        return (
            <List>
                <FlatList
                    data={dataArray}
                    renderItem={({ item }) => (
                        <ListItem
                            title={<Text>{item.groupTitle}</Text>}
                            time={<Text>{item.groupTime}</Text>}
                        />
                    )}
                />
            </List>
        );
    }
}

Collectives™ on Stack Overflow

React-Native Firebase Display array of objects using FlatList

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related