How to dynamically change material ui icon depending on the backend response?

Question

I have a table and in this table, there is a column named status, and in this column, three values are returned from the backend, which are "approve", "Review" and "pending". My problem is that I want when the status is "approve" to change the shape of the icon to "VerifiedUserIcon" (import VerifiedUserIcon from '@material-ui/icons/VerifiedUser';) and When the status review that changes the shape of the icon to "VisibilityIcon", just like this picture

How can I solve my problem?

<TableCell className="p-4 md:p-16 truncate" component="th" scope="row">
  <Chip
    style={{ fontSize: "1.2rem" }}
    icon={<FaceIcon />}
    label={n.status}
    variant="outlined"
  />
</TableCell>;

Answer 1

const statusIcon = (status) => {
  switch (status) {
    case "verified":
      return <VerifiedIcon />;
    case "review":
      return <ReviewIcon />;
    default:
      return <DefaultIcon />;
  }
};

<TableCell className="p-4 md:p-16 truncate" component="th" scope="row">
  <Chip style={{ fontSize: "1.2rem" }} icon={statusIcon(n.status)} label={n.status} variant="outlined" />
</TableCell>;

Answer 2

You can also use ternary operator to specify icons, assuming only 3 states

<TableCell className="p-4 md:p-16 truncate" component="th" scope="row">
  <Chip
    style={{ fontSize: "1.2rem" }}
    icon={
      n.status === "approve" ? (
        <VerifiedIcon />
      ) : n.status === "review" ? (
        <ReviewIcon />
      ) : (
        <PendingIcon />
      )
    }
    label={n.status}
    variant="outlined"
  />
</TableCell>;

Answer 3

You can even try Object literals for your icons by mapping status with related icons something like below.

const statusIcon = {
  verified: <VerifiedIcon />,
  review: <ReviewIcon />,
  // other icons based on your status
};

Then in your code, you can use the statusIcon object and get the icon based on the property.

<TableCell className="p-4 md:p-16 truncate" component="th" scope="row">
  <Chip
    style={{ fontSize: "1.2rem" }}
    icon={statusIcon[n.status]}
    label={n.status}
    variant="outlined"
  />
</TableCell>