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, Jan 24 '17 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, Jan 24 '17 at 10:15
@Rajesh Alright thanks. But the header names do not necessarily reflect the property name. — Murat Karagöz, Jan 24 '17 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, Jan 24 '17 at 10:19

score 5 · Accepted Answer · edited Dec 20 '21 at 11:47

5

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 '21 at 11:47

Ardor

154
11

answered Jan 24 '17 at 10:05

Vladu Ionut

8,075
1
19
30

This syntax worked. Could you explain it a bit more? – Murat Karagöz Jan 24 '17 at 10:08
see this thread http://stackoverflow.com/questions/22138550/immediate-function-using-javascript-es6-arrow-functions – Vladu Ionut Jan 24 '17 at 10:14

score 1 · Answer 2 · answered Jan 24 '17 at 10:00

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 '17 at 10:00

Jiang YD

3,205
1
14
20

How do I call it? – Murat Karagöz Jan 24 '17 at 10:02
as @Vladu answered – Jiang YD Jan 24 '17 at 10:05

score 1 · Answer 3 · answered Jan 24 '17 at 10:06

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 '17 at 10:06

Nitzan Tomer

155,636
47
315
299

I guess I could do it this way, but I was curious about the inline functions. – Murat Karagöz Jan 24 '17 at 10:10
It feels that using a function in this case is redundant. You have nothing to gain from it. – Nitzan Tomer Jan 24 '17 at 10:13
My main purpose was to use the switch inside the `` tags. No idea how else I would go about this without a function call? – Murat Karagöz Jan 24 '17 at 10:15
Why does the `switch` need to be inside the ``? 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. – Nitzan Tomer Jan 24 '17 at 10:18
Does not need to be there, but for learning purposes on how I would go about inline functions. – Murat Karagöz Jan 24 '17 at 10:21
Alright. Just be careful not to misuse this feature – Nitzan Tomer Jan 24 '17 at 10:24

How to return a jsx element with an inline switch?

3 Answers3