How to display output in browser?

user_19415671 0
Viewed 27

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
         
      />
    );
react-native reactjs node.js html
1 Answers

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
         
      />
    );
user_76156230
Related