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.
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;
}
})()}
you defined a function but not call it
() => {
switch (header) {
case "Name": return entry.name;
case "Type": return entry.type;
default: return entry.name;
}
}
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>;
}