Switch case inside JSX not working: ReactJS

Question

In my reactjs component - in the render, I want to create a switch case that will use particular components based on a switch case. But there is a syntax error here.

Should I just make this as a function inside the component?

Unexpected token (190:32)

  188 | 
  189 |   {
> 190 |     return (
      |     ^

Here is the full return function for the component:

return (
    <div className="Page">
        ....
    {
        elements.map(function(element, index){
            return (
                <Col xs={24} sm={element["grid-width"]*2} md={element["grid-width"]} key={index} className="element-container">
                  .....
                      <div className="contents">
                        {
                          return (
                            switch (element.type) { 
                              case 'we-are-always-here-to-help':
                                sss
                                break;
                              case 'call-us-when-you-are-having-difficulties':
                                xx
                                break;
                              default: 
                            }
                          )
                        }
                      </div>
                </Col>
            )
        })
    }
    </div>
)

Difficult to read your code. Likely, you need a switch case where each case will return something, rather than the other way around — cbll
– cbll, Commented Aug 30, 2017 at 14:27

Mayank Shukla · Accepted Answer · 2017-08-30 16:50:54Z

Rule:

We can put any expression not statement inside JSX by using {}.

It's not a valid syntax, we can not use switch statement or any other statement directly inside JSX.

Solution:

Put all the switch part logic inside a function, call that function from JSX and return the result.

Write it like this:

<div>
    {this._switchPart(element.type)}
</div>

Define _switchPart like this:

_switchPart(type){
    switch (type) {
       case 'we-are-always-here-to-help': return sss;

       case 'call-us-when-you-are-having-difficulties': return xx;

       default: return xy;
    } 
}

Or use ternary operator for conditional rendering or you can also use IIFE.

MrCode · Accepted Answer · 2017-08-30 14:45:51Z

2

You can use an IIFE like so:

{(() => {
  switch (element.type) {
    case 'we-are-always-here-to-help':
      return sss;
      break;
    case 'call-us-when-you-are-having-difficulties':
      return xx;
      break;
    default:
      return dd;
  }
})()}

answered Aug 30, 2017 at 14:45

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Comments

chuve · Accepted Answer · 2017-08-30 14:48:36Z

Working example for this issue:

class Example extends React.Component {
    constructor () {
        super();
    }

    renderView() {
        switch (this.props.viewName) {
            case 'index': {
                return (<div>Index</div>);
            }

            default: {
                return <div>404 Error</div>;
            }
        }
    }

    render () {
        return (<div>{this.renderView()}</div>);
    }
};

ReactDOM.render(<Example viewName="index" />, document.getElementById("root"));

Do Async · Accepted Answer · 2020-04-10 18:20:07Z

0

You can use plain object instead of switch:

<div className="contents">
  {{
    'we-are-always-here-to-help': sss,
    'call-us-when-you-are-having-difficulties': xx,
  }[element.type]}
</div>

answered Apr 10, 2020 at 18:20

Do Async

4,3301 gold badge27 silver badges26 bronze badges

Collectives™ on Stack Overflow

Switch case inside JSX not working: ReactJS

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related