Ternary Operator alternatives for more than 2 values

Question

In my react-native applications, i had written a code like this.

   return (  
            <PersonHandler
                profilePicture={item.user.profileImage ? {uri: item.user.profileImage} : DefaultUser}
                firstName={item.user.firstName}
                lastName={item.user.lastName}

                buttonBorderColor={item.status === 0 ? "#000000" : "#37CAFA"}
                buttonBackgroundColor={item.status === 0 ? null : "#37CAFA"}
                buttonTextColor={item.status === 0 ? "#000000" : "#FFFFFF"}          
                buttonText={item.status === 0 ? USER_STATUS.REQUESTED : USER_STATUS.FOLLOWING}

                submitting={unfollowIsInProgress && item._id === unfollowingPerson._id}
                onButtonPress={() => this.onUnfollowPress(item)}
            />
        );      

Now I have more than 2 statuses to handle, so the ternary operator here cannot be used. What will be the best approach to handle a situation like this?

I have 3 statuses now. 0, 1 and 2. According to the status I have to handle the following conditions.

 buttonBorderColor={item.status === 0 ? "#000000" : "#37CAFA"}
                buttonBackgroundColor={item.status === 0 ? null : "#37CAFA"}
                buttonTextColor={item.status === 0 ? "#000000" : "#FFFFFF"}          
                buttonText={item.status === 0 ? USER_STATUS.REQUESTED : USER_STATUS.FOLLOWING}

Answer 1

Sure you can use the ternary operator still, you just have to use it twice, for example:

 buttonBorderColor={
   item.status === 0
     ? "#000000"
     : item.status === 1
       ? "#37CAFA"
       : "#FFFFFF" // if status is 2
}

That said, it's a bit uncomfortable to read - you might consider using an array indexed by status whose value is the color you want instead:

const colors = ["#000000", "#37CAFA", "#FFFFFF"]
// ...
buttonBorderColor={ colors[item.status] }

Answer 2

Use switch to handle three statuses. Nesting ternary operators is not a wise practice.

var buttonBorderColor,
  buttonBackgroundColor,
  buttonTextColor,
  buttonText

switch (item.code) {
  case 0:
    buttonBorderColor = '#000000'
    buttonBackgroundColor = null
    buttonTextColor = "#000000"
    buttonText = USER_STATUS.REQUESTED
    break;
  case 1:
    buttonBorderColor = '#37CAFA'
    buttonBackgroundColor = '#37CAFA'
    buttonTextColor = "#FFFFFF"
    buttonText = USER_STATUS.FOLLOWING
    break;
  case 2:
    buttonBorderColor = '#FFFFFF'
    buttonBackgroundColor = '#FFFFFF'
    buttonTextColor = "#FFFFFF"
    buttonText = USER_STATUS.ELSE
    break;
  default:
    break;
}