Home > Enterprise >  Support optional arguments in switch statement in React component
Support optional arguments in switch statement in React component

Time:10-06

From the api I can query:

  • type which returns strings 'Type A' or 'Type B'
  • typeXy which returns strings 'Type X' or 'Type Y'

Based on those values I want to create a switch statement to get the proper value.

const getLabel = (type?: string, typeXy?: string) => {
    switch (type || typeXy) {
      case 'Type A':
        return labelA;
      case 'Type B':
        return labelB;
      case 'Type X':
        return labelX;
      case 'Type Y':
        return labelY;
      default:
        return '';
    }
  };

Then in my React component I want to pass the function getLabel() through the label prop to send the correct label to the child component.

  return (
    <Grid
      items={data?.items?.map((node) => ({
        label: getLabel(node.type || node.typeXy),
      }))}
    />
  );

But how do I create the switch statement which accepts or argument/field A or argument/field B?

And then in the function it can accepts or field A or field B (node.type or node.typeXy)?

CodePudding user response:

Try this (in vanilla javascript)

const getLabel = (type, typeXy) => {
    switch (type || typeXy) {
      case 'Type A':
        return 'labelA';
      case 'Type B':
        return 'labelB';
      case 'Type X':
        return 'labelX';
      case 'Type Y':
        return 'labelY';
      default:
        return '';
    }
  };
  
console.log(getLabel('', 'Type Y'))
console.log(getLabel('Type A', ''))

  • Related