How to return a jsx element with an inline switch?

Question

I am trying to return an element with an inline switch. But I am getting only a empty <span> </span>. What am I doing wrong?

 getRowTdForHeader: (header: string, entry: response) => {
            return (<span>
                {() => {
                    switch (header) {
                        case "Name":  return entry.name;
                        case "Type": return entry.type;
                        default: return entry.name;
                    }
                } }
            </span>);
        }

Result is a empty span and if I put a breakpoint at the return, it never goes into the switch statement at all. I'd like to keep it as a in-liner if possible. The switch works fine if I don't inline it btw.

First, I don't see purpose for ()=> Second, even switch is not required. You can do entry[(header || 'name')] — Rajesh Dixit
– Rajesh Dixit, Commented Jan 24, 2017 at 10:04
entry is an object and since you are returning property that is same word but different case, header.toLowercase() will give you property name. So if header is Name, entry[header.toLowerCase()] will return entry['name']. || 'name' is the default value. If header is not defined, return name. Also my apologies, I forgot .toLowerCase() — Rajesh Dixit
– Rajesh Dixit, Commented Jan 24, 2017 at 10:15
@Rajesh Alright thanks. But the header names do not necessarily reflect the property name. — Murat Karagöz
– Murat Karagöz, Commented Jan 24, 2017 at 10:17
But will case always have return value only? If yes, I'd suggest to create a map and then just return entry[map[header]] — Rajesh Dixit
– Rajesh Dixit, Commented Jan 24, 2017 at 10:19

Theobald Beyer · Accepted Answer · 2021-12-20 11:47:22Z

7

You have to wrap the arrow function in parentheses and execute it immediately with a following pair of parentheses.

{(() => {
    switch (header) {
                        case "Name":  return entry.name;
                        case "Type": return entry.type;
                        default: return entry.name;
                    }
})()}

edited Dec 20, 2021 at 11:47

Theobald Beyer

1841 silver badge14 bronze badges

answered Jan 24, 2017 at 10:05

Vladu Ionut

8,2231 gold badge23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Murat Karagöz Over a year ago

This syntax worked. Could you explain it a bit more?

Vladu Ionut Over a year ago

see this thread stackoverflow.com/questions/22138550/…

Jiang YD · Accepted Answer · 2017-01-24 10:00:46Z

1

you defined a function but not call it

() => {
    switch (header) {
        case "Name":  return entry.name;
        case "Type": return entry.type;
        default: return entry.name;
    }
}

answered Jan 24, 2017 at 10:00

Jiang YD

3,3091 gold badge17 silver badges22 bronze badges

2 Comments

Murat Karagöz Over a year ago

How do I call it?

Jiang YD Over a year ago

as @Vladu answered

Nitzan Tomer · Accepted Answer · 2017-01-24 10:06:41Z

1

I suggest that you put the result into a variable and then use it:

getRowTdForHeader: (header: string, entry: response) => {
    let str: string;
    switch (header) {
        case "Name":  str = entry.name;
        case "Type": str = entry.type;
        default: str = entry.name;
    }

    return <span> { str } </span>;
}

answered Jan 24, 2017 at 10:06

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

6 Comments

Murat Karagöz Over a year ago

I guess I could do it this way, but I was curious about the inline functions.

Nitzan Tomer Over a year ago

It feels that using a function in this case is redundant. You have nothing to gain from it.

Murat Karagöz Over a year ago

My main purpose was to use the switch inside the <span> tags. No idea how else I would go about this without a function call?

Nitzan Tomer Over a year ago

Why does the switch need to be inside the <span>? The conversion between the header to a string doesn't even have to happen in this method, you can have a static/global function which does that for you.

Murat Karagöz Over a year ago

Does not need to be there, but for learning purposes on how I would go about inline functions.

|

Collectives™ on Stack Overflow

How to return a jsx element with an inline switch?

3 Answers 3

2 Comments

2 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related