Why when consulting firebase via snapshot, is returning that maps is not a function?

Question

 constructor() {
    super();
    this.ref = firebase.firestore().collection('boards');
    this.unsubscribe = null;
    this.state = {
        isLoading: true,
        boards: []
    };
componentDidMount() {
    this.unsubscribe = this.ref.onSnapshot(this.onCollectionUpdate);
}
onCollectionUpdate = (querySnapshot) => {
    const boards = [];
    querySnapshot.forEach((doc) => {
        const { title, description, author } = doc.data();
        boards.push({
            key: doc.id,
            title,
            description,
            author
        });
    });
    this.setState({
        boards,
        isLoading: false
    })
    console.log(boards);
}
    return(
        <View style={styles.container}>
            {
                this.state.boards.maps((item, i) => {
                    return (
                        <ListItem
                            key={i}
                            title={item.title}
                            leftIcon={{name: 'book', type: 'font-awesome'}}
                            onPress={() => {
                                this.props.navigation.navigate('BoardDetails', {
                                    boardKey: `${JSON.stringify(item.key)}`,
                                });
                            }}
                        />
                    );
                })
            }
        </View>
    );

The error is on the line: this.state.Boards.maps Where the error indicates that maps is not a function. I’m a beginner and I’m not able to find the mistake, I’ve made all kinds of trade, it may be silly, but I can’t find it! Could someone give me a light? I will be very grateful!

Answer 1

The function map works only with arrays. If it tells you that map is not a function, it means that the component you are trying to traverse is not an array, it could be anything else.

Before using the this.state.boards.map tried to make a console.log(this.state.boards)? The first element must be an array, not an Object.

On the line of this.setState({boards, isLoading: false}), do this:

this.setState({boards: boards, isLoading: false})

If not yet successful, try using Object.keys(this.state.boards).map or Object.keys(this.state.boards[0]).map.