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

112 views Asked by At

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?

1

There are 1 answers

6
Zohaib On BEST ANSWER

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