How to return a jsx element with an inline switch?

0

Issue

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.

Solution

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;
                    }
})()}

Answered By – Vladu Ionut

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More