So im just playing around with the rick and morty api and I've never done a ternary with 3 conditions. Mozilla docs says 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. Im using chakra ui if anyones curious. What am I doing wrong?
<Badge
colorScheme={ c.status === "Alive" ? "green"
: "unknown" ? "purple"
: "red"
}
>
{c.status}
</Badge>
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]}
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" );
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.