नेस्टेड टर्नरी ऑपरेटर अपेक्षित रूप से वापस नहीं आ रहा है

props = {colorVariant: ''} // just here for the demo

const color = props.colorVariant == 'success' ? 'green' :
props.colorVariant == 'info' ? 'gray' :
props.colorVariant == 'error' ? 'red' :
props.colorVariant == 'default' ? 'black' : 'purple';

console.log('color:', color); // purple

props.colorVariant == 'success' ? 'green' : props.colorVariant == 'info' ? 'gray' : props.colorVariant == 'error' ? 'red' : props.colorVariant == 'default' ? 'black' : 'purple'

: के बाद आपको यह शर्त दोहरानी होगी की बजाय

    props.colorVariant == 'success' ? 'green' : 'info' ? 'gray' : 'error' ? 'red' : 'default' ? 'black' : 'purple'

आपको निम्न कार्य करना चाहिए

props.colorVariant == 'success' ? 'green' : props.colorVariant == 'info' ? 'gray' : props.colorVariant == 'error' ? 'red' : props.colorVariant == 'default' ? 'black' : 'purple'

फिलहाल आपको 'ग्रे' मिलता है क्योंकि:

props.colorVariant, success से अलग है, फिर यह info पर जाता है, लेकिन कोई शर्त नहीं है, इसलिए यह सच है (क्योंकि एक स्ट्रिंग को बूलिकन में डाला जाता है, यह हमेशा सत्य होता है) तो आपको gray

आपको चर के खिलाफ जांच करने की आवश्यकता है। यदि नहीं पहली खाली स्ट्रिंग सत्य नहीं है।

props.colorVariant === 'success'
    ? 'green'
    : props.colorVariant === 'info'
        ? 'gray'
        : props.colorVariant === 'error'
            ? 'red'
            : props.colorVariant === 'default'
                ? 'black'
                : 'purple'