Is there a better way to conditionally render these BE responses on the FE? using react

Question

I have a component that is mapping responses for an API call in my FE react component.

The API response will look something like this :

[
  {
    time: '1:00pm'
    status: 'Success'
  },
  {
    time: '2:00pm'
    status: 'Failed: Invalid ID'
  },
]

The issue I am facing is that status can have 7 different values and instead of mapping that status text into the component directly, I'm being asked to map a similar but slightly text based on the status value.

/*
BE Response Text                  | Text to display on the FE
"Failed: Invalid Portal ID"         Failure: Incorrect Username
"Password Lockout"                  Failure: Account Locked
"Invalid Password"                  Failure: Incorrect Password
"Passwordless Login Required"       Failure: Passwordless login required
"Restricted IP"                     Failure: Restricted IP
*any other failure message*         Failure: Technical Error
"Success"                           Success
*/

I'm not sure what to do here, I would think this should probably be handled on the BE but im being asked to do it on the FE, not entirely sure what the best approach would be, chaining ternaries perhaps?

What I have so far:

response.map() => {
  return (
    <div>
      {response.status === 'Success'
        ? response.status
        : `Failure ${response.status}`}
    </div>
  )
})

Answer 1

How about using an object as a lookup table of all the known cases, and falling back to "Failure: Technical Error" for everything else

const strings = {
  Success: "Success",
  "Failed: Invalid Portal ID": "Failure: Incorrect Username";
  "Password Lockout": "Failure: Account Locked";
  // etc
}

response.map(() => {
  return (
    <div>
      {strings[response.status] || "Failure: Technical Error"}
    </div>
  )
})