Javascript Question posted in
A very good W3school tutorial can be found here.

How to use conditional ternary operator for mulitple cases javascript?

Hi i am trying to use ternary operator for multiple cases.

below is the code snippet,

const status_color_to_icon_name = {
    white: 'info',
    orange: 'major',
}

const default_icon_name = 'icon1';

<Icon name={status_color_to_icon_name[item.color] ?? default_icon_name} color= 
    {item.color} />

the above works fine. it looks for item name based on item.color if no name found in status_color_to_icon_name based on item.color it returns default_icon_name

now i have other condition if item.color is ‘red’ then i want to use custom_icon

i have tried below,

const custom_icon ='icon2';


const status_color_to_icon_name = {
    white: 'info',
    orange: 'major',
}

const default_icon_name = 'icon1';

<Icon name={item.color === 'red' ? custom_icon : 
    status_color_to_icon_name[item.color] ?? default_icon_name} color= 
    {item.color} />

but the above doesnt seem correct. could someone help me with this. thanks.

EDIT: fixed the typo for custom_icon_name and also this item.color could be undefined tried like so

<Icon name={(item.color && item.color === 'red')  ? custom_icon : 
    status_color_to_icon_name[item.color] ?? default_icon_name} 
/>

can we rewrite this something better.

Tags:

2

Answers


  1. 0

    Your approach is correct, but there is a small typo in your code.
    You defined custom_icon but used custom_icon_name

    const customIcon = 'icon2';

const statusColorToIconName = {
    white: 'info',
    orange: 'major',
};
const defaultIconName = 'icon1';

const getIconName = (color) => {
    if (color === 'red') {
        return customIcon;
    }
    return statusColorToIconName[color] || defaultIconName;
};

<Icon name={getIconName(item.color)} color={item.color}/>
    Login or Signup to reply.
  2. 0

    You can simplify and improve the readability of your code by restructuring the ternary operator and using a fallback for undefined item.color in a more concise way:

    const custom_icon = 'icon2';
const status_color_to_icon_name = {
  white: 'info',
  orange: 'major',
};
const default_icon_name = 'icon1';

<Icon 
  name={
    item.color === 'red' 
      ? custom_icon 
      : status_color_to_icon_name[item.color] || default_icon_name
  } 
  color={item.color || 'defaultColor'} 
/>

    If we actually try to debug it:

    const items = [{
    id: 1,
    color: 'red'
  },
  {
    id: 2,
    color: 'blue'
  },
  {
    id: 3,
    color: 'white'
  },
  {
    id: 4,
    color: 'orange'
  },
  // and etc
];

const custom_icon = 'icon2';
const default_icon_name = 'icon1';

const status_color_to_icon_name = {
  white: 'info',
  orange: 'major',
  blue: 'neutral',
};

items.forEach((item) => {
  const icon_name = item.color === 'red' ?
    custom_icon :
    status_color_to_icon_name[item.color] || default_icon_name;

  console.log(`Item ID: ${item.id}, Color: ${item.color}, Icon: ${icon_name}`);
});

    So, the ternary operator: item.color === 'red' ? custom_icon : ... checks if the color is 'red', and if so, logs the custom_icon.

    Fallback to default_icon_name: status_color_to_icon_name[item.color] || default_icon_name checks the object for the color, and if the color is not found (e.g., blue or unknown), it defaults to default_icon_name.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search