Cannot render tabpanel as component

[nguyenhuutinh]

I have dynamic tabpanel content. So I need to create component to call API. render () { return ( < TabPanel className="content__products" > ...

But it cannot render. error: "There should be an equal number of 'Tabs' and 'TabPanels'.Received 3 'Tabs' and 0 'TabPanels'."

Do you know why?

[joepvl]

While I can't completely make out what you're trying to do, I suspect you're trying to wrap your <TabPanel>s in a different component within <Tabs>. Unfortunately, this is not supported. You'll need to implement your tabs in such a way that you're always passing an equal amount of <Tab>s and <TabPanel>s to the component, with the following constraints:

• <Tab>s need to be direct descendants (children) of <TabList>
• <TabPanel>s need to be direct descendants (children) of <Tabs> (so they are siblings of <TabList>)

[anjalikk14]

@joepvl just checking in, are these constraints still true and is there any chance that supporting containers around Tabs is on the roadmap?

[joepvl]

The constraints still hold, and there are no plans to change that. However, you can create a custom TabPanel if you want, using the method described at the very end of the README: https://github.com/reactjs/react-tabs#custom-components.