React - How to return one of several components to a rendering function?

Question

In my state, I have showTab1 , showTab2 , showTab3 . If tab i is selected, the remaining tabs will be set to false. So in my render function, I want to return something like this:

  return ( <div> { (() => { if (someCondition) { if (this.state.showTab1) { return ( <div> <Tab1/> </div> ) } else if (this.state.showTab2) { return ( <div> <Tab2/> </div> ) } else if (this.state.showTab3) { return ( <div> <Tab3/> </div> ) } } return <span />; })() } <AnotherComponent> </div> ); 

But I know that he is not allowed to have multiple returns, or at least this is considered bad practice. How can I get around this?

Answer 1

Ideally, you should use a single variable to determine which tab you need, and then you can use the switch instead of multiple if s. Something like this would be nice:

 render() { const { currentTabId } = this.props; let CurrentTab; switch( currentTabId ) { case 'tab1': CurrentTab = Tab1; break; case 'tab2': CurrentTab = Tab2; break; case 'tab3': CurrentTab = Tab3; break; default: CurrentTab = null; }; return <div>{ CurrentTab && <CurrentTab /> }</div>; } 

or

 render() { const { currentTabId } = this.props; const tabs = { tab1: Tab1, tab2: Tab2, tab3: Tab3, }; const CurrentTab = tabs[ currentTabId ] || null; return <div>{ CurrentTab && <CurrentTab /> }</div>; } 

Answer 2

What do your tabs have in common and what makes them different from others?

With this in mind, create one Tab component that takes the necessary properties (differences) and displays accordingly. But why?

React is awesome because it can know the minimum number of changes needed for the DOM to represent the state you set, allowing you to treat the entire user interface as a state system. React's good performance is based on how well it can explain these differences.

If your render method returns a completely different component each time, React will remove one and add another , because it cannot tell the difference between the one and the other. But if you specify the properties and state, what changes and what will not change in your component, then it will do its job very well. The DOM is terrible, it has always been, the less changes you make to it, the better your page will be.

Does this mean that you cannot return three completely different components? Of course not, but if you do this on all of your components, then you will have a very serious performance problem. It sounds a lot like bad practice and good enough reasons to avoid it.

Take the SO tabs on the right as a very trivial example and suppose you go to them from another place on the page, so only one active is displayed.

If you do this:

 <div> {() => { if (this.state.active === 'jobs') return <Jobs>; if (this.state.active === 'doc') return <Documentation>; // ... you get it }} </div> 

Whenever you change state.active , React removes the tab and adds a new one.

But if you do not use bad practice and use good practice, for example , stateless functional components

 const Tab = ({text, href, children}) => ( <div> <a href={href}>{text}</a> {children} </div> ); // In the parent one textByTab() { switch(this.state.active) { case 'jobs': return 'Jobs'; case 'doc': return 'Documentation'; } } hrefByTab() { // ... you get it } childrenByTab() { if (this.state.active === 'doc') return <span className="beta-thing">Beta</span>; } render() { return ( <div> <Tab text={this.textByTab()} href={this.hrefByTab()}> {this.childrenByTab()} </Tab> </div> ); } 

Now React knows exactly what can change, how it can change, and even come up with functional things to improve performance.