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?
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