Alternative to nested ternary expressions in my React component to pass prop value condionally

Question

Based on a certain type field (from api) I have to conditionally send a string value through a prop to my React child component.

const labelOne = 'Label one';
const labelTwo = 'Label two';
const LabelThree = 'Label three';

return (

        <Child
          items={data?.items?.map((node) => ({
            labelText: node.type.includes('One')
              ? labelOne
              : node.type.includes('Two')
              ? labelTwo
              : node.type.includes('Three')
              ? LabelThree
              : '',
          }))}
        />
  );

But my Eslint doesn't like more then 2 ternary expressions.

Do not nest ternary expressions.

What is an alternative in this case?

Update:

I added a function:

const renderText = (type) => {
    let myText;

    switch (type) {
      case type.includes(Type.One):
        myText = 'Text one';
        break;
      case type.includes(TeaserType.Two):
        myText = 'Text two';
        break;
      case type.includes(TeaserType.Three):
        myText = 'Text three';
        break;
      default:
        break;
    }
    return ctaText;
  };

Then in my child component I have:

<Child myText: renderText(node.type) />

I am using typescript. For my myText prop I typed it like:

myText?: () => void;

But when I log it, it returns undefined?

I think https://stackoverflow.com/questions/46272156/how-can-i-avoid-nested-ternary-expressions-in-my-code this would help you. — Arun Kumar, Sep 21 '21 at 11:37

Moistbobo · Answer 1 · 2021-09-21T12:43:07.137

If you're just mapping text based on a property of your data and you don't need to run any additional logic, I would suggest using a regular json object to map the options.

ex


    const labelMap= {
      "one": "Label one",
      "two": "Label two",
      "three":"Label three"
    }
    
    return (
    
        <Child
          items={data?.items?.map((node) => ({
            labelText: labelMap[node.type]
          }))}
        />
    
      );

This is a lot less boilerplate and slightly more performant (albeit incredibly negligible) than using a function with if/else/switch.

score 1 · Accepted Answer · edited Sep 21 '21 at 12:30

1

step 1: define this function

const typeQuery = (type)=>{ 
switch (type) {
      case "Label one":
        return LabelOne
        break;
      case "Label two":
        return LabelTwo
        break;
      case "Label three":
        return LabelThree
        break;
      default:
        return null
        break;
    }
}

step 2: change the code like this

    <Child
          items={data?.items?.map((item) =>typeQuery(item.type) }
        />

It may seem like a bit more work, but the syntax is much cleaner and much much more scalable if you get more types.

edited Sep 21 '21 at 12:30

Moistbobo

2,342
1
7
16

answered Sep 21 '21 at 12:08

Sobhan Jahanmard

821
5
16

@Moistbobo do you know why it returns undefined? – meez Sep 21 '21 at 14:40
1

@meez Seems like the cases for the switch statements are incorrect, I'll submit an edit. – Moistbobo Sep 21 '21 at 14:43
@Moistbobo I think the cases are fine. In his code, the method ```include``` is being used so he just needs to check for ```one``` or ```two``` or ```three``` . But in the switch case we are checking the whole string to see if it's ```Label one``` or so on – Sobhan Jahanmard Sep 21 '21 at 16:10
@Moistbobo Although, I checked out your answer , and it's far better. So no point here – Sobhan Jahanmard Sep 21 '21 at 16:13

score 0 · Answer 3 · answered Sep 21 '21 at 11:37

0

You could extract to a function and use if else

answered Sep 21 '21 at 11:37

JorgeB

103
2
9

Without a code example, I feel like this is more suited as a comment than an answer. – Moistbobo Sep 21 '21 at 12:03

Alternative to nested ternary expressions in my React component to pass prop value condionally

3 Answers3