How to visualize array of users iwhich i get from firestore n react datable?

Question

My problem is to get the array which is displayed at the console to the view. My method for geting the users documents from collection in firestore:

    var UserData= [];
    componentDidMount() {
        const firestore = getFirestore();
        firestore.collection("users").get().then(data => {

          data.forEach(doc => {

            // console.log( "User",doc.data());
            UserData.push(doc.data());   


          });
          console.log("User:", UserData); 
        });


render() {
  return (

     <div>
        <button onClick={this.onLoad}>Get specific user data</button>
        <button onClick={this.onLoad1}>Get all user data</button>
     </div>

  );
}
}
export default compose()(AdminPanel);

When the page is opened in the console is this: [![enter image description here][1]][1]

So my question is how to make the constructor to get this array of users and visualize them in datatable at the page?

Answer 1

In react .map method is used to iterate through objects and their properties.

return (
   <div>
    <button onClick={this.onLoad}>Get specific user data</button>
    <button onClick={this.onLoad1}>Get all user data</button>
    <table>
        <tbody>
            {UserData.map((user) => {
                           return (
                            <tr key={Math.random()>
                               <td>{user.city}</td>
                               <td>{user.email}</td>
                               <td>{user.firstName}</td>
                               <td>{user.initials}</td>
                               <td>{user.lastName}</td>
                            </tr>
                             )
                           }
                         }
      </tbody>
    </table>
   </div>
  );

It will iterate through all objects in UserData one by one and display their properties in tr item .

Check this React docs page. https://reactjs.org/docs/lists-and-keys.html