Así que solo estoy jugando con la API de Rick and Morty y nunca he hecho un ternario con 3 condiciones. Los documentos de Mozilla dicen que puedes, pero no funciona para mí. El siguiente código muestra los personajes con el estado vivo en verde y el resto en morado. Quiero que vivo sea verde, que muerto sea rojo, que lo desconocido sea morado. Estoy usando la interfaz de usuario de chakra si alguien tiene curiosidad. ¿Qué estoy haciendo mal?
<Badge colorScheme={ c.status === "Alive" ? "green" : "unknown" ? "purple" : "red" } > {c.status} </Badge>Tienes tus símbolos mezclados. Agrupando entre paréntesis, su código es equivalente a
c.status === "Alive" ? "green" : ("unknown" ? "purple" : "red")necesitas en su lugar
c.status === 'Alive' ? 'green' : c.status === 'unknown' ? 'purple' : 'red'O podría usar una tabla de búsqueda en su lugar, sería más legible.
const colorsByStatus = { Alive: 'green', unknown: 'purple', dead: 'red' }; // ... colorSceme={colorsByStatus[c.status]}En la segunda condición, está utilizando "desconocido", que siempre es cierto, por lo tanto, la salida siempre será "púrpura". Haz lo siguiente.
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" );