0

I want to implement an idea using react-tabs where I change the content displayed in the TabPanels depending on a particular state. I have tried to implement this by having a parent component (AppTabs) that depending on the value of the state (let's call it mode) it renders one of two different components: Tables or Graphs.

These two components return the TabPanels with the content that each of them should render. Here is the code:

AppTabs: AppTabs code

Tables: Tables code

Graphs: Graphs code

When I try to execute this, I get the following error message:

Warning: Failed prop type: There should be an equal number of 'Tab' and 'TabPanel' in Tabs. Received 2 'Tab' and 0 'TabPanel'.

Does this mean that I need to declare all of the pieces of react-tabs (Tab, Tabs, TabList, TabPanel) in the same component or else it won't work? Or am I doing something wrong?

I want to do it this way because then I could have all of the states regarding the Tables component or the Graphs component separated. Otherwise, I would need to set all of the states for both of these components in AppTabs and I think that would be very cluttered and a nightmare to maintain.

Thank you for your feedback in advance! Have a great day!

Jawad ul hassan
  • 565
  • 1
  • 4
  • 19
elita185
  • 11
  • 3

1 Answers1

0

I have an answer for this issue.

I asked the react-tabs team about this issue as well and this was their answer:

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.

The team provided some suggestions on how to deal with this situation. They are explained in the discussion we had over at their github page.

Here is a link to the issue if anyone is interested in it: https://github.com/reactjs/react-tabs/issues/481

I hope this can be useful to someone else, have a great day!

elita185
  • 11
  • 3
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 22 '22 at 18:21