How to display output in browser? - html

Question

I retrieved my data from the database using the code below. It will return the number of "Active" and "Banned" account in console.log.
GetUserList = async user_type => {
this.setState({ loading: true });
const res = await userMgmt.getUserList(user_type);
console.log(res);
const activeAccount = res.data.data.filter(({ banned }) => !banned).length;
const bannedAccCount = res.data.data.filter(({ banned }) => banned).length;
console.log("Active : ", activeAccount);
console.log("Banned : ", bannedAccCount);
if (res.status === 200) {
if (this.mounted && res.data.status === "ok") {
this.setState({ loading: false, user_list: res.data.data });
}
} else {
if (this.mounted) {
this.setState({ loading: false });
}
ResponseError(res);
}
};
I want to display "activeAccount" and "bannedAccount" here but not sure how to.
const pageHeader = (
<PageHeader
style={{ backgroundColor: "#fff", marginTop: 4 }}
title="User Management - Admin"
<span>{`Banned User : `}</span>, //display banned here
<span>{`Active User : `}</span>, //display active here
/>
);

Answer 1

Insert both activeAccount and bannedAccCount into the state as follows.
const activeAccount = res.data.data.filter(({ banned }) => !banned).length;
const bannedAccCount = res.data.data.filter(({ banned }) => banned).length;
console.log("Active : ", activeAccount);
console.log("Banned : ", bannedAccCount);
if (res.status === 200) {
if (this.mounted && res.data.status === "ok") {
this.setState({
loading: false,
user_list: res.data.data,
activeAccount,
bannedAccCount,
});
}
}
Then show it inside the react component as follows.
const pageHeader = (
<PageHeader
style={{ backgroundColor: "#fff", marginTop: 4 }}
title="User Management - Admin"
<span>Banned User : {this.state.bannedAccCount}</span>, //display banned here
<span>Active User : {this.state.activeAccount}</span>, //display active here
/>
);