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;
}

Answer 3

You can use this way

buttonBorderColor={item.status === 0 ? "#000000" : (item.status === 1 ? "#000001" : "#37CAFA")}

or you can use if else ladder

if (item.status === 0) {
    buttonBorderColor = '#000000'
    buttonBackgroundColor = null
    buttonTextColor = "#000000"
    buttonText = USER_STATUS.REQUESTED
} else if (item.status === 1) {
    // do something
} else {
    // do something
}

Answer 4

You can do it like this:

const pickValue = (status, v1, v2, v3) => 
    status === 0
        ? v1
        : status === 1 
            ? v2
            : v3;

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

        buttonBorderColor={pickValue(item.status, "#000000", "#37CAFA", null)}
        buttonBackgroundColor={pickValue(item.status, null, "#37CAFA", null)}
        buttonTextColor={pickValue(item.status, "#000000", "#FFFFFF", null)}
        buttonText={pickValue(item.status, USER_STATUS.REQUESTED, USER_STATUS.FOLLOWING, null)}

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