Return multiple values in switch case using react.js

Question

I am using a switch case to render text based on the case value. In addition to the text, I also want to add an icon. So for a particular case, there would be an icon and next to it there would be an appropriate text.

To implement that, I am adding icon and text in return statement of case condition.

     case 'DENIED':
       return <Square /> + intl.formatMessage(messages.processDenied);
     case 'CANCELLED':
       return <CloseIcon color='red' /> + intl.formatMessage(messages.processCancelled);
     case 'INCOMPLETE':
       return <HourglassIcon /> + intl.formatMessage(messages.processIncomplete);
     default:
        return intl.formatMessage(messages.processApproved);
}

When I use the above logic, I get

Instead of displaying icon, it displays [object,object]. Can I not use '+' sign to concatenate two elements ? If so, how do I return both the elements in a single return?

Felix Kling · Accepted Answer · 2019-04-16T20:34:54.740

0

Can I not use '+' sign to concatenate two elements ?

No, that performs string concatenation. A React element is an object, not a string. The default string representation of an object is [object Object] which is why you get that output.

If so, how do I return both the elements in a single return?

Either use a fragment or put both elements inside another one:

// fragment
return <><Square /> {intl.formatMessage(messages.processDenied)}</>;

// children of another element
return <span><Square /> {intl.formatMessage(messages.processDenied)}</span>;

edited Apr 16 '19 at 20:34

answered Apr 16 '19 at 20:27

Felix Kling

795,719
175
1,089
1,143

I believe you can also wrap the line with parenthesis like so: return ( {intl.formatMessage(messages.processIncomplete)}); – Alex Apr 16 '19 at 20:33
@Alex: No, that's invalid JavaScript. – Felix Kling Apr 16 '19 at 20:34
How so? The return statement in the render function is wrapped with parenthesis in React and if the switch block is in the Render, it can only return one JSX element. – Alex Apr 16 '19 at 20:36
Yes I tried wrapping the line in () but it doesn't work. – user2128 Apr 16 '19 at 20:39
Now that I think about it, it can only return one parent element. You'll need to wrap it with a span, div, or fragment. My bad. – Alex Apr 16 '19 at 20:40
Fragment option didn't work either. But adding a parent element works fine. – user2128 Apr 16 '19 at 20:40
@alex: First of all, `{intl.formatMessage(messages.processIncomplete)}` is invalid *JavaScript*. `{...}` denotes an object literal in your example and this invalid syntax for an object literal. Even if you omit the `{...}`, the code would become `return (React.createElement(...) intl.formatMessage(...))`. You cannot just put two function calls after each other in a single expression. – Felix Kling Apr 16 '19 at 20:40
@alex: *"The return statement in the render function is wrapped with parenthesis in React"* That's usually done to prevent automatic semicolon insertion when the value to return is written on the next line after `return`. That is not specific to React. I.e. `return 42;` works fine, but `return 42;` will not. `return ( 42 );` will work. See also https://stackoverflow.com/q/18221963/218196 . – Felix Kling Apr 16 '19 at 20:42
@user2128: yeah, whether fragments work or not really depends on how the return value of the function is used. If this is returning from a `render` function it should work though. – Felix Kling Apr 16 '19 at 20:45

Return multiple values in switch case using react.js

1 Answers1