using switch statement for react rendering

Question

I'm currently doing this to conditionally render certain Components:

render() { return ( <React.Fragment> <div id="call_notes_app" className="row"> <NavTree onNavChange={this.changeActiveGroup} /> {this.state.shownGroup == 1 && <DiscoveryGroup/>} {this.state.shownGroup == 2 && <FinancialGroup/>} {this.state.shownGroup == 3 && <SalesStuffGroup/>} </div> </React.Fragment> ); }

When I try to use a switch statement, it doesn't work (I get ERROR ABORT in the console):

render() { return ( <React.Fragment> <div id="call_notes_app" className="row"> <NavTree onNavChange={this.changeActiveGroup} /> { switch(this.state.shownGroup) { case 1: <DiscoveryGroup/> break; case 2: <FinancialGroup /> break; default: <SalesStuffGroup /> } } </div> </React.Fragment> ); }

Is there a way to do this using switch?

Nick · Accepted Answer · 2018-04-11 21:06:00Z

{} is for a single statement. A cleaner way would be switching before the return statement:

render() { let component = null; switch(this.state.shownGroup) { case 1: component = <DiscoveryGroup />; break; case 2: component = <FinancialGroup />; break; default: component = <SalesStuffGroup />; } return ( <React.Fragment> <div id="call_notes_app" className="row"> <NavTree onNavChange={this.changeActiveGroup} /> {component} </div> </React.Fragment> ); }

If you eventually have many dynamic components, splitting things out to seperate methods cleans things up even more:

renderGroup(group) { switch (group) { case 1: return <DiscoveryGroup />; case 2: return <FinancialGroup />; default: return <SalesStuffGroup />; } } render() { return ( <React.Fragment> <div id="call_notes_app" className="row"> <NavTree onNavChange={this.changeActiveGroup} /> {this.renderGroup(this.state.shownGroup)} </div> </React.Fragment> ); }

Jonas Wilms · Accepted Answer · 2018-04-11 21:00:04Z

React requires expressions in the {} block, therefore you need to wrap the switch statement into an IIFE:

 {(() => { switch(this.state.shownGroup) { case 1: return <DiscoveryGroup/> break; case 2: return <FinancialGroup /> break; default: return <SalesStuffGroup /> } })()}

But i personally would actually prefer an Immeadiately Accessed Array Literal (IAAL):

 {[,<DiscoveryGroup/>, <FinancialGroup />][this.state.showGroup] || <SalesStuffGroup />}

The second method will run constructors of all the components but first, which is not cool. The first approach will create a new function on every render, which is cooler, but still unnecessary.

Tosh · Accepted Answer · 2023-03-06 00:30:35Z

The switch is nice, but in these cases it might be more elegant to use an object (or array with find):

const LayoutComponents { 'simple': SimpleLayout, 'wild': WildLayout, 'freudian': FreudianLayout, } const Layout = LayoutComponents[props.layout]; if (!Layout) { console.error('Drama Alert'); // throw error or return } // render. return <Layout {...props}>{props.children}</Layout>

Collectives™ on Stack Overflow

using switch statement for react rendering

3 Answers 3

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Linked

Related