Render JSX Switch Case with onClick event

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.

Dupocas · Accepted Answer · 2019-10-01 17:20:27Z

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>
        )
    }
}

Error i get: Invalid hook call. Hooks can only be called inside of the body of a function component.
That is because you're usign a class based component. I'm updating the answer
Sorry, it was my mistake for using Storybook to test this. The previous answer was right. Cheers!
hahaha You solved, that's what matters!! Welcome to stackoverflow

Collectives™ on Stack Overflow

Render JSX Switch Case with onClick event

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related