Is it that good practice to place the conditional UI changes in the class itself?

Issue

The class is actually doing some changes in colors. If the value is active, Then, It will show some colored text and background is in the same logic for the remaining values like rejected, cancelled, expired, pending. Is it that good to write like this or Is there any other alternative way to write. While seeing this it might like 🤮

className={`
  ${cell.row.original.invite_status === "active" && "bg-green-50 text-success" }
  ${cell.row.original.invite_status === "pending" && "bg-yellow-50 text-yellow-400"}
  ${cell.row.original.invite_status === "expired" && "bg-slate-50 text-slate-400" }
  ${cell.row.original.invite_status === "rejected" && "bg-purple-50 text-purple-500 mr-44" }
  ${cell.row.original.invite_status === "cancelled" && "bg-red-50 text-red-500 mr-44" }
  ml-14 px-4 py-1 font-medium rounded-md mr-4
`}

Solution

It's pretty hard to read and not very clear, so with a method like this:

function getInviteClass(invite_status) {

  switch(invite_status) {
    case 'active': return 'bg-green-50 text-success';
    case 'pending': return 'bg-yellow-50 text-yellow-400';
    case 'expired': return 'bg-slate-50 text-slate-400';
    case 'rejected': return 'bg-purple-50 text-purple-500 mr-44';
    case 'cancelled': return 'bg-red-50 text-red-500 mr-44';
  }

}

You can move it out into the controller, then this is much cleaner:

className={`${ getInviteClass(cell.row.original.invite_status) } ml-14 px-4 py-1 font-medium rounded-md mr-4`}

Answered By - seniorcreative