Ternary Operator alternatives for more than 2 values

  • A+
Category:Languages

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} 

 


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

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: