使用 onClick 事件渲染 JSX Switch Case

Question

I'm trying to call a switch case verification with a onClick event but my DOM does not get updated. This is my code:

function app() {
  const showTab = tabContentID => {
    switch (tabContentID) {
      case 'tab-1':
        return <TabContent id='tab-1'>Patients Content</TabContent>;
      case 'tab-2':
        return <TabContent id='tab-2'>Recents Content</TabContent>;
      case 'tab-3':
        return <TabContent id='tab-3'>Favorites Content</TabContent>;
      default:
        return <TabContent id='tab-1'>Patients Content</TabContent>;
    }
  };
  return (
    <div>
      <Tabs initialTab='tab-1' activeTabIndex='9999'>
        <Tab tabContentID='tab-1' onClick={() => showTab('tab-1')}>
          Tab 1
        </Tab>
        <Tab tabContentID='tab-2' onClick={() => showTab('tab-2')}>
          Tab 2
        </Tab>
        <Tab tabContentID='tab-3' onClick={() => showTab('tab-3')}>
          Tab 3
        </Tab>
      </Tabs>
    </div>
  );
}

What i was speculating to happen is on clicking the first Tab, render the case 'tab-1' , but nothing changes. What i'm doing wrong?

I have tried calling {showTab} after my </Tabs> but i didnt worked.

Answer 1

You are returning jsx from your function, but never specifying an insertion point. You could associate the returned value to a state's variable, like this

class Component extends React.Component{
    state = {
        content : null
    }

    showTab = tabContentID => {
        switch (tabContentID) {
            case 'tab-1':
                return this.setState({content: <TabContent id='tab-1'>Patients Content</TabContent>})
            case 'tab-2':
                return this.setState({content: <TabContent id='tab-2'>Recents Content</TabContent>})
            case 'tab-3':
                return this.setState({content: <TabContent id='tab-3'>Favorites Content</TabContent>})
            default:
                return this.setState({content: <TabContent id='tab-1'>Patients Content</TabContent>})
        }
    }

    render(){
        const { content } = this.state
        return (
            <div>
                <Tabs initialTab='tab-1' activeTabIndex='9999'>
                    <Tab tabContentID='tab-1' onClick={() => this.showTab('tab-1')}>
                        Tab 1
                    </Tab>
                    <Tab tabContentID='tab-2' onClick={() => this.showTab('tab-2')}>
                        Tab 2
                    </Tab>
                    <Tab tabContentID='tab-3' onClick={() => this.showTab('tab-3')}>
                        Tab 3
                    </Tab>
                </Tabs>
                {content}
            </div>
        )
    }
}