Bdtjtk

I need consultation with rendering React components for each element in JSON (in this case - Firebase database).
I'm trying to create an array of book's data and push it to an array bookKeysArray which then I will use for mapping.

As a result I get error that component ListOfUserBooks doesn't return anything (bookComponent is undefined).

Does anyone have any suggestions?

function ListOfUserBooks(props) {

    currentUserId = firebase.auth().currentUser.uid;

    userBooksDataRef = firebase.database().ref('booksData/').child(currentUserId);

    let bookKeysArray = ,

        bookComponent;



    userBooksDataRef.once('value')

            .then((snapshot) => {

                snapshot.forEach((childSnapshot) => {

                    bookKey = childSnapshot.key;

                    bookData = childSnapshot.val();

                    description = bookData.description;

                    ...



                    let bookDataArray = [description, ...];

                    bookKeysArray.push(bookDataArray);



                    bookComponent = bookKeysArray.map((book, index) => {

                            <ListOfUserBooks_ListView key = {index}

                                                       description = {book.description}

                                                       .../>

                        });

                    }

                });

            });

     return bookComponent;

};

Firebase data structure

The execution of the .then is asynchronous. So you are actually returning bookComponent before having even populated it. In react development operations such retrieving data from FireBase are executed in a lifecycle hook to populate the state and then render it. You can easily accomplish this using a class component:

class ListOfUserBooks extends React.Component {

  constructor(...args) {

    super(...args)

    this.state = { bookKeysArray:  }

  }



  componentDidMount() {

    currentUserId = firebase.auth().currentUser.uid;

    userBooksDataRef = firebase.database().ref('booksData/').child(currentUserId);

    userBooksDataRef.once('value')

      .then((snapshot) => {

         bookKeysArray = 

         snapshot.forEach((childSnapshot) => {

           bookKey = childSnapshot.key;

           bookData = childSnapshot.val();

           description = bookData.description;

           ...

           bookKeysArray.push([description, ...]);

         })

         this.setState({ bookKeysArray })

  }



  render() {

    return this.state.bookKeysArray.map((book, index) => {

      return <ListOfUserBooks_ListView key = {index} .../>

    });

  }

}