3 conditions - ternary conditional chains JavaScript react

user_14452555 0
Viewed 337

So I'm just playing around with the rick and Morty API and I've never done a ternary with 3 conditions. Mozilla docs say you can, but it's not working for me. The code below shows the characters with the status alive in green and the rest are purple. I want alive to be green, dead to be red, unknown to be purple. I'm using chakra UI if anyone's curious. What am I doing wrong?

<Badge
  colorScheme={ c.status === "Alive" ? "green"
      : "unknown" ? "purple"
      : "red"
  }
>
  {c.status}
</Badge>
reactjs conditional-statements conditional-operator javascript
2 Answers

You have your symbols mixed up. Grouping with parentheses, your code is equivalent to

c.status === "Alive" ? "green"
      : ("unknown" ? "purple" : "red")

You need instead

c.status === 'Alive'
  ? 'green'
  : c.status === 'unknown' ? 'purple' : 'red'

Or you could use a lookup table instead - it'd be more readable.

const colorsByStatus = {
  Alive: 'green',
  unknown: 'purple',
  dead: 'red'
};

// ...

colorSceme={colorsByStatus[c.status]}
user_95152070

In the second condition, you are using "unknown" which is always true hence the output will always be "purple". Do the following.

let a = { status: "Alive" };
let b = { status: "dead" };
let c = { status: "unknown" };

console.log(
  a.status === "Alive" ? "green" : a.status === "unknown" ? "purple" : "red"
);

console.log(
  b.status === "Alive" ? "green" : b.status === "unknown" ? "purple" : "red"
);

console.log(
  c.status === "Alive" ? "green" : c.status === "unknown" ? "purple" : "red"
);

user_123384820
Related