How to render list of users from firestore and display it in a table form on web page using react js?

Question

On "View User" button click, I am trying to retrieve user details from Firestore and display it in a table on web page. Using console.log(), I can view the data in the console. I checked some links on how to display those data in a table but of no help. Please help, below is the code I used.

Following are the fields(same naming conventions used, some with spaces) in my User collection;

Email: "...."
Name: "...."
Phone number: "...."
Vehicle Number: "...."

Home.js

import React, { Component } from 'react';
import firebase from '../config/Firebase';

class Home extends Component {

constructor(props) {
    super(props);
    this.state = {
        users: [],
        userId: ''
    };
}


logout = () => {
    firebase.auth().signOut();
}

viewUser = () => {
    const db = firebase.firestore();
    db.settings({ timestampsInSnapshots: true });
    db.collection('Users').get().then((snapshot) => {
        snapshot.docs.forEach(doc => {
            if (doc.exists) {
                // let user = doc.data();
                // this.setState({ user: user});
                // console.log("user state updated: ",user)
                // console.log("user name: ",user);
                this.setState({
                    users: doc.data(),
                    userId: doc.id,
                    isLoading: false
                })
            } else {
                // this.setState({user: null});
                console.log("No data");
            }

        })
    })
    console.log('item clicked');
}

viewFeedback = () => {
    const db = firebase.firestore();
    db.settings({ timestampsInSnapshots: true });
    db.collection('Feedback').get().then((snapshot) => {
        snapshot.docs.forEach(doc => {
            console.log(doc.data())
        })
    })
    console.log('feedback item clicked');
    // this.render() {  
    //     return (
    //         <div>

    //         </div>
    //     )
    // }
}
render() {
    // let userUI = this.state.user ? <span>No User data</span> : <pre>{JSON.stringify(this.state.user)}</pre>;
    let userUI = this.state.user ? <span>No User data</span> : 
            <table>
                <tr>
                    <th>User ID</th>
                    <th>Email</th>
                    <th>Name</th>
                    <th>Phone Number</th>
                    <th>Vehicle Number</th>
                </tr>
                {this.state.users.map(Users =>
                   <tr>
                    <td>{this.state.userId}</td>
                    <td>{Users.Email}</td>
                    <td>{Users.Name}</td>
                    {/* <td>{Users.Phone number}</td> */}
                   </tr> 
                )}

            </table>;

    return(
        <div>
            <h1>Manager Dashboard</h1>
            <button>Add Parking Area</button> 
            <button>View Booking</button>
            <button onClick={this.viewFeedback}>View Feedback</button>
            <button onClick={this.viewUser}>View User</button>
            <button onClick={this.logout}>logout</button>

            <div>
                <h3>View Users</h3>
                {userUI}
            </div>

        </div>
    )
}
}
export default Home;

Thanks.

Answer 1

Try this one :

viewUser = () => {
    const db = firebase.firestore();
    db.settings({ timestampsInSnapshots: true });
    db.collection('Users').get().then((snapshot) => {
        snapshot.forEach(doc => {
            if (doc.exists) {
                // let user = doc.data();
                // this.setState({ user: user});
                // console.log("user state updated: ",user)
                // console.log("user name: ",user);
     this.setState(prevState => ({
  users: [...prevState.users,doc.data()]
}));
   console.log(this.state.users)


            } else {
                // this.setState({user: null});
                console.log("No data");
            }

        })
    })
    console.log('item clicked');
}