Issues when implementing the same Tabs for different TabPanels about react-tabs HOT 2 CLOSED

Hi. Unfortunately there is no way to declare your TabPanels in a separate component; the Tabs component can't detect them through the component boundary. However, a simple solution in this case would be to turn the Tables and Graphs components into render functions:

function renderTables() {
  return (
    <React.Fragment>
      <TabPanel>Table content 1</TabPanel>
      <TabPanel>Table content 2</TabPanel>
    </React.Fragment>
  );
}

function renderGraphs() {
  return (
    <React.Fragment>
      <TabPanel>Graph content 1</TabPanel>
      <TabPanel>Graph content 2</TabPanel>
    </React.Fragment>
  );
}

function AppTabs({ mode }) {
  return (
    <Tabs className="tabs">
      <TabList>
        <Tab>title 1</Tab>
        <Tab>title 2</Tab>
      </TabList>
      {mode === 'tables' && renderTables()}
      {mode === 'graphs' && renderGraphs()}
    </Tabs>
  );
}

Another way to solve this particular issue would be to pass the mode to the components you render inside the TabPanels and use that to decide what to render from inside the component.

from react-tabs.

Hi joepvl, thank you for your answer!
The code I provided is from a pet project that simplifies what I want to achieve in the real project I am working on.

The issue is that in this real project, the Tables and Graphs component would have their own states and a lot of complex logic that would unique to each one. That is why I can't turn them into render functions.

I also thought about implementing the second solution you suggested, but that would mean that all of the states and complex logic that I want to use in the Tables and Graphs components would need to be declared in the AppTabs component, which would make said component quite cluttered and difficult to work with.

I appreciate very much your input, it gives me a lot more clarity on what I can do and can't do with the project at hand :)
Have a great day, kind regards!

from react-tabs.